Vite + React + TS

10 | ) 11 | } 12 | 13 | export { Skeleton } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | import { defineConfig } from "vite"; 4 | import react from "@vitejs/plugin-react-swc"; 5 | 6 | // https://vite.dev/config/ 7 | export default defineConfig({ 8 | plugins: [react(), tailwindcss()], 9 | resolve: { 10 | alias: { 11 | "@": path.resolve(__dirname, "./src"), 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "", 8 | "css": "src/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /src/hooks/use-mobile.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const MOBILE_BREAKPOINT = 768 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState(undefined) 7 | 8 | React.useEffect(() => { 9 | const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) 10 | const onChange = () => { 11 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 12 | } 13 | mql.addEventListener("change", onChange) 14 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT) 15 | return () => mql.removeEventListener("change", onChange) 16 | }, []) 17 | 18 | return !!isMobile 19 | } 20 | -------------------------------------------------------------------------------- /src/components/ui/sonner.tsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from "next-themes" 2 | import { Toaster as Sonner, ToasterProps } from "sonner" 3 | 4 | const Toaster = ({ ...props }: ToasterProps) => { 5 | const { theme = "system" } = useTheme() 6 | 7 | return ( 8 | 20 | ) 21 | } 22 | 23 | export { Toaster } 24 | -------------------------------------------------------------------------------- /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 | 6 | import { cn } from "@/lib/utils" 7 | 8 | function Label({ 9 | className, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 21 | ) 22 | } 23 | 24 | export { Label } 25 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 4 | "target": "ES2022", 5 | "lib": ["ES2023"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "verbatimModuleSyntax": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | 16 | /* Linting */ 17 | "strict": true, 18 | "noUnusedLocals": true, 19 | "noUnusedParameters": true, 20 | "erasableSyntaxOnly": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noUncheckedSideEffectImports": true 23 | }, 24 | "include": ["vite.config.ts"] 25 | } 26 | -------------------------------------------------------------------------------- /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 | function Separator({ 9 | className, 10 | orientation = "horizontal", 11 | decorative = true, 12 | ...props 13 | }: React.ComponentProps) { 14 | return ( 15 | 25 | ) 26 | } 27 | 28 | export { Separator } 29 | -------------------------------------------------------------------------------- /src/components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) { 6 | return ( 7 |

15 |   )
16 | }
17 | 
18 | export { Textarea }
19 |

--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | import tseslint from 'typescript-eslint'
 6 | 
 7 | export default tseslint.config(
 8 |   { ignores: ['dist'] },
 9 |   {
10 |     extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |     files: ['**/*.{ts,tsx}'],
12 |     languageOptions: {
13 |       ecmaVersion: 2020,
14 |       globals: globals.browser,
15 |     },
16 |     plugins: {
17 |       'react-hooks': reactHooks,
18 |       'react-refresh': reactRefresh,
19 |     },
20 |     rules: {
21 |       ...reactHooks.configs.recommended.rules,
22 |       'react-refresh/only-export-components': [
23 |         'warn',
24 |         { allowConstantExport: true },
25 |       ],
26 |     },
27 |   },
28 | )
29 |

--------------------------------------------------------------------------------
/src/components/ui/progress.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ProgressPrimitive from "@radix-ui/react-progress"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | function Progress({
 7 |   className,
 8 |   value,
 9 |   ...props
10 | }: React.ComponentProps<typeof ProgressPrimitive.Root>) {
11 |   return (
12 |     <ProgressPrimitive.Root
13 |       data-slot="progress"
14 |       className={cn(
15 |         "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
16 |         className
17 |       )}
18 |       {...props}
19 |     >
20 |       <ProgressPrimitive.Indicator
21 |         data-slot="progress-indicator"
22 |         className="bg-primary h-full w-full flex-1 transition-all"
23 |         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
24 |       />
25 |     </ProgressPrimitive.Root>
26 |   )
27 | }
28 | 
29 | export { Progress }
30 |

--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/*": ["./src/*"]
 6 |     },
 7 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 8 |     "target": "ES2020",
 9 |     "useDefineForClassFields": true,
10 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
11 |     "module": "ESNext",
12 |     "skipLibCheck": true,
13 | 
14 |     /* Bundler mode */
15 |     "moduleResolution": "bundler",
16 |     "allowImportingTsExtensions": true,
17 |     "verbatimModuleSyntax": true,
18 |     "moduleDetection": "force",
19 |     "noEmit": true,
20 |     "jsx": "react-jsx",
21 | 
22 |     /* Linting */
23 |     "strict": true,
24 |     "noUnusedLocals": true,
25 |     "noUnusedParameters": true,
26 |     "erasableSyntaxOnly": true,
27 |     "noFallthroughCasesInSwitch": true,
28 |     "noUncheckedSideEffectImports": true
29 |   },
30 |   "include": ["src"]
31 | }
32 |

--------------------------------------------------------------------------------
/src/components/ui/collapsible.tsx:
--------------------------------------------------------------------------------
 1 | import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 2 | 
 3 | function Collapsible({
 4 |   ...props
 5 | }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
 6 |   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
 7 | }
 8 | 
 9 | function CollapsibleTrigger({
10 |   ...props
11 | }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
12 |   return (
13 |     <CollapsiblePrimitive.CollapsibleTrigger
14 |       data-slot="collapsible-trigger"
15 |       {...props}
16 |     />
17 |   )
18 | }
19 | 
20 | function CollapsibleContent({
21 |   ...props
22 | }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
23 |   return (
24 |     <CollapsiblePrimitive.CollapsibleContent
25 |       data-slot="collapsible-content"
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | export { Collapsible, CollapsibleTrigger, CollapsibleContent }
32 |

--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 |

--------------------------------------------------------------------------------
/.cursor/rules/temu-v0.mdc:
--------------------------------------------------------------------------------
 1 | ---
 2 | description: 
 3 | globs: 
 4 | alwaysApply: true
 5 | ---
 6 | This is a project using Vite, TypeScript, Tailwind CSS, shadcn/ui, and React. It is used as a prototyping environment for front-end experiences.
 7 | 
 8 | - Use prebuilt components from the shadcn/ui library after it is imported: `import { alert, AlertDescription, AlertTitle, AlertDialog, AlertDialogAction } from '@/components/ui/alert'`;.
 9 | - To get a sense of which components exist look in `./src/components`.
10 | - Ensure that React components use Tailwind CSS for styling. Minimize use of CSS in CSS files (but use it where necessary).
11 | - Use functional React components as much as possible, with hooks where necessary.
12 | - Where complex state handling is needed, favor use of React context over installing state management packages.
13 | - When you need to use icons only use Lucide React after it is imported: `import { Camera } from 'lucide-react';`.
14 | - See package.json to see packages already installed.
15 | - If the user asks you to persist things, favor simple local storage solutions over more durable options.
16 |

--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SwitchPrimitive from "@radix-ui/react-switch"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Switch({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
12 |   return (
13 |     <SwitchPrimitive.Root
14 |       data-slot="switch"
15 |       className={cn(
16 |         "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
17 |         className
18 |       )}
19 |       {...props}
20 |     >
21 |       <SwitchPrimitive.Thumb
22 |         data-slot="switch-thumb"
23 |         className={cn(
24 |           "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
25 |         )}
26 |       />
27 |     </SwitchPrimitive.Root>
28 |   )
29 | }
30 | 
31 | export { Switch }
32 |

--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Avatar({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12 |   return (
13 |     <AvatarPrimitive.Root
14 |       data-slot="avatar"
15 |       className={cn(
16 |         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | function AvatarImage({
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28 |   return (
29 |     <AvatarPrimitive.Image
30 |       data-slot="avatar-image"
31 |       className={cn("aspect-square size-full", className)}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function AvatarFallback({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41 |   return (
42 |     <AvatarPrimitive.Fallback
43 |       data-slot="avatar-fallback"
44 |       className={cn(
45 |         "bg-muted flex size-full items-center justify-center rounded-full",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   )
51 | }
52 | 
53 | export { Avatar, AvatarImage, AvatarFallback }
54 |

--------------------------------------------------------------------------------
/src/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 5 | import { CheckIcon } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | function Checkbox({
10 |   className,
11 |   ...props
12 | }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
13 |   return (
14 |     <CheckboxPrimitive.Root
15 |       data-slot="checkbox"
16 |       className={cn(
17 |         "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
18 |         className
19 |       )}
20 |       {...props}
21 |     >
22 |       <CheckboxPrimitive.Indicator
23 |         data-slot="checkbox-indicator"
24 |         className="flex items-center justify-center text-current transition-none"
25 |       >
26 |         <CheckIcon className="size-3.5" />
27 |       </CheckboxPrimitive.Indicator>
28 |     </CheckboxPrimitive.Root>
29 |   )
30 | }
31 | 
32 | export { Checkbox }
33 |

--------------------------------------------------------------------------------
/src/components/ui/radio-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 5 | import { CircleIcon } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | function RadioGroup({
10 |   className,
11 |   ...props
12 | }: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
13 |   return (
14 |     <RadioGroupPrimitive.Root
15 |       data-slot="radio-group"
16 |       className={cn("grid gap-3", className)}
17 |       {...props}
18 |     />
19 |   )
20 | }
21 | 
22 | function RadioGroupItem({
23 |   className,
24 |   ...props
25 | }: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
26 |   return (
27 |     <RadioGroupPrimitive.Item
28 |       data-slot="radio-group-item"
29 |       className={cn(
30 |         "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
31 |         className
32 |       )}
33 |       {...props}
34 |     >
35 |       <RadioGroupPrimitive.Indicator
36 |         data-slot="radio-group-indicator"
37 |         className="relative flex items-center justify-center"
38 |       >
39 |         <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
40 |       </RadioGroupPrimitive.Indicator>
41 |     </RadioGroupPrimitive.Item>
42 |   )
43 | }
44 | 
45 | export { RadioGroup, RadioGroupItem }
46 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Temu v0
 2 | 
 3 | ![Temu v0](./assets/icon.png)
 4 | 
 5 | It doesn't matter which coding platform you use to prototype your front-end. They all use the exact same trick:
 6 | 
 7 | 1. They use Claude Sonnet 3.5 (or derivatives) because Claude is a very good boy.
 8 | 2. They install the [shadcn/ui](https://ui.shadcn.com/) library and ask the model not to use anything else.
 9 | 3. They provide some basic rules that reign in the model's propensity to do more than asked for.
10 | 
11 | If you look at the system prompts from [Anthropic Artifacts](https://gist.github.com/max/268519b8e0994ffa6a8706850e0b9c3c), [v0](https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/blob/main/v0%20Prompts%20and%20Tools/Prompt.txt#L23-L24), [Lovable](https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools/blob/main/Lovable/Lovable%20Prompt.txt#L13), Bolt, etc. they all work the exact same way. You want to know what's even crazier? You don't even need Cursor or a fancy IDE. Building the equivalent of Claude Code is [a few hundred lines of code](https://ampcode.com/how-to-build-an-agent).
12 | 
13 | This template provides a minimal setup to prototype user interfaces. It happens to use Cursor rules so you should probably just use Cursor.
14 | 
15 | ## Vibe-coding locally
16 | 
17 | 1. [Install Bun](https://bun.sh/) (if you have NodeJS installed that works too).
18 | 2. Clone this repository or instantiate it as a template.
19 | 3. `bun install` in the repository.
20 | 4. `bun run dev` and open http://localhost:5173/ in your browser.
21 | 5. Ask Cursor to make a change. For example: "Change the label of the button on the homepage to please click me and when the user clicks open an alert that says Hello my dear user."
22 |

--------------------------------------------------------------------------------
/src/components/ui/hover-card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | function HoverCard({
 7 |   ...props
 8 | }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
 9 |   return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
10 | }
11 | 
12 | function HoverCardTrigger({
13 |   ...props
14 | }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
15 |   return (
16 |     <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
17 |   )
18 | }
19 | 
20 | function HoverCardContent({
21 |   className,
22 |   align = "center",
23 |   sideOffset = 4,
24 |   ...props
25 | }: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
26 |   return (
27 |     <HoverCardPrimitive.Portal data-slot="hover-card-portal">
28 |       <HoverCardPrimitive.Content
29 |         data-slot="hover-card-content"
30 |         align={align}
31 |         sideOffset={sideOffset}
32 |         className={cn(
33 |           "bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
34 |           className
35 |         )}
36 |         {...props}
37 |       />
38 |     </HoverCardPrimitive.Portal>
39 |   )
40 | }
41 | 
42 | export { HoverCard, HoverCardTrigger, HoverCardContent }
43 |

--------------------------------------------------------------------------------
/src/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TogglePrimitive from "@radix-ui/react-toggle"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const toggleVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-transparent",
13 |         outline:
14 |           "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
15 |       },
16 |       size: {
17 |         default: "h-9 px-2 min-w-9",
18 |         sm: "h-8 px-1.5 min-w-8",
19 |         lg: "h-10 px-2.5 min-w-10",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |       size: "default",
25 |     },
26 |   }
27 | )
28 | 
29 | function Toggle({
30 |   className,
31 |   variant,
32 |   size,
33 |   ...props
34 | }: React.ComponentProps<typeof TogglePrimitive.Root> &
35 |   VariantProps<typeof toggleVariants>) {
36 |   return (
37 |     <TogglePrimitive.Root
38 |       data-slot="toggle"
39 |       className={cn(toggleVariants({ variant, size, className }))}
40 |       {...props}
41 |     />
42 |   )
43 | }
44 | 
45 | export { Toggle, toggleVariants }
46 |

--------------------------------------------------------------------------------
/src/components/ui/badge.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 badgeVariants = cva(
 8 |   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
14 |         secondary:
15 |           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
16 |         destructive:
17 |           "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18 |         outline:
19 |           "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
20 |       },
21 |     },
22 |     defaultVariants: {
23 |       variant: "default",
24 |     },
25 |   }
26 | )
27 | 
28 | function Badge({
29 |   className,
30 |   variant,
31 |   asChild = false,
32 |   ...props
33 | }: React.ComponentProps<"span"> &
34 |   VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
35 |   const Comp = asChild ? Slot : "span"
36 | 
37 |   return (
38 |     <Comp
39 |       data-slot="badge"
40 |       className={cn(badgeVariants({ variant }), className)}
41 |       {...props}
42 |     />
43 |   )
44 | }
45 | 
46 | export { Badge, badgeVariants }
47 |

--------------------------------------------------------------------------------
/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 | function Popover({
 9 |   ...props
10 | }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11 |   return <PopoverPrimitive.Root data-slot="popover" {...props} />
12 | }
13 | 
14 | function PopoverTrigger({
15 |   ...props
16 | }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17 |   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
18 | }
19 | 
20 | function PopoverContent({
21 |   className,
22 |   align = "center",
23 |   sideOffset = 4,
24 |   ...props
25 | }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
26 |   return (
27 |     <PopoverPrimitive.Portal>
28 |       <PopoverPrimitive.Content
29 |         data-slot="popover-content"
30 |         align={align}
31 |         sideOffset={sideOffset}
32 |         className={cn(
33 |           "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
34 |           className
35 |         )}
36 |         {...props}
37 |       />
38 |     </PopoverPrimitive.Portal>
39 |   )
40 | }
41 | 
42 | function PopoverAnchor({
43 |   ...props
44 | }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
45 |   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
46 | }
47 | 
48 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
49 |

--------------------------------------------------------------------------------
/src/components/ui/alert.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 alertVariants = cva(
 7 |   "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: "bg-card text-card-foreground",
12 |         destructive:
13 |           "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: "default",
18 |     },
19 |   }
20 | )
21 | 
22 | function Alert({
23 |   className,
24 |   variant,
25 |   ...props
26 | }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
27 |   return (
28 |     <div
29 |       data-slot="alert"
30 |       role="alert"
31 |       className={cn(alertVariants({ variant }), className)}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
38 |   return (
39 |     <div
40 |       data-slot="alert-title"
41 |       className={cn(
42 |         "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
43 |         className
44 |       )}
45 |       {...props}
46 |     />
47 |   )
48 | }
49 | 
50 | function AlertDescription({
51 |   className,
52 |   ...props
53 | }: React.ComponentProps<"div">) {
54 |   return (
55 |     <div
56 |       data-slot="alert-description"
57 |       className={cn(
58 |         "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
59 |         className
60 |       )}
61 |       {...props}
62 |     />
63 |   )
64 | }
65 | 
66 | export { Alert, AlertTitle, AlertDescription }
67 |

--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function ScrollArea({
 9 |   className,
10 |   children,
11 |   ...props
12 | }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13 |   return (
14 |     <ScrollAreaPrimitive.Root
15 |       data-slot="scroll-area"
16 |       className={cn("relative", className)}
17 |       {...props}
18 |     >
19 |       <ScrollAreaPrimitive.Viewport
20 |         data-slot="scroll-area-viewport"
21 |         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
22 |       >
23 |         {children}
24 |       </ScrollAreaPrimitive.Viewport>
25 |       <ScrollBar />
26 |       <ScrollAreaPrimitive.Corner />
27 |     </ScrollAreaPrimitive.Root>
28 |   )
29 | }
30 | 
31 | function ScrollBar({
32 |   className,
33 |   orientation = "vertical",
34 |   ...props
35 | }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36 |   return (
37 |     <ScrollAreaPrimitive.ScrollAreaScrollbar
38 |       data-slot="scroll-area-scrollbar"
39 |       orientation={orientation}
40 |       className={cn(
41 |         "flex touch-none p-px transition-colors select-none",
42 |         orientation === "vertical" &&
43 |           "h-full w-2.5 border-l border-l-transparent",
44 |         orientation === "horizontal" &&
45 |           "h-2.5 flex-col border-t border-t-transparent",
46 |         className
47 |       )}
48 |       {...props}
49 |     >
50 |       <ScrollAreaPrimitive.ScrollAreaThumb
51 |         data-slot="scroll-area-thumb"
52 |         className="bg-border relative flex-1 rounded-full"
53 |       />
54 |     </ScrollAreaPrimitive.ScrollAreaScrollbar>
55 |   )
56 | }
57 | 
58 | export { ScrollArea, ScrollBar }
59 |

--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | function TooltipProvider({
 7 |   delayDuration = 0,
 8 |   ...props
 9 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
10 |   return (
11 |     <TooltipPrimitive.Provider
12 |       data-slot="tooltip-provider"
13 |       delayDuration={delayDuration}
14 |       {...props}
15 |     />
16 |   )
17 | }
18 | 
19 | function Tooltip({
20 |   ...props
21 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
22 |   return (
23 |     <TooltipProvider>
24 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
25 |     </TooltipProvider>
26 |   )
27 | }
28 | 
29 | function TooltipTrigger({
30 |   ...props
31 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
32 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
33 | }
34 | 
35 | function TooltipContent({
36 |   className,
37 |   sideOffset = 0,
38 |   children,
39 |   ...props
40 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
41 |   return (
42 |     <TooltipPrimitive.Portal>
43 |       <TooltipPrimitive.Content
44 |         data-slot="tooltip-content"
45 |         sideOffset={sideOffset}
46 |         className={cn(
47 |           "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
48 |           className
49 |         )}
50 |         {...props}
51 |       >
52 |         {children}
53 |         <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
54 |       </TooltipPrimitive.Content>
55 |     </TooltipPrimitive.Portal>
56 |   )
57 | }
58 | 
59 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
60 |

--------------------------------------------------------------------------------
/src/components/ui/resizable.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { GripVerticalIcon } from "lucide-react"
 3 | import * as ResizablePrimitive from "react-resizable-panels"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | function ResizablePanelGroup({
 8 |   className,
 9 |   ...props
10 | }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
11 |   return (
12 |     <ResizablePrimitive.PanelGroup
13 |       data-slot="resizable-panel-group"
14 |       className={cn(
15 |         "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
16 |         className
17 |       )}
18 |       {...props}
19 |     />
20 |   )
21 | }
22 | 
23 | function ResizablePanel({
24 |   ...props
25 | }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
26 |   return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
27 | }
28 | 
29 | function ResizableHandle({
30 |   withHandle,
31 |   className,
32 |   ...props
33 | }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
34 |   withHandle?: boolean
35 | }) {
36 |   return (
37 |     <ResizablePrimitive.PanelResizeHandle
38 |       data-slot="resizable-handle"
39 |       className={cn(
40 |         "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
41 |         className
42 |       )}
43 |       {...props}
44 |     >
45 |       {withHandle && (
46 |         <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
47 |           <GripVerticalIcon className="size-2.5" />
48 |         </div>
49 |       )}
50 |     </ResizablePrimitive.PanelResizeHandle>
51 |   )
52 | }
53 | 
54 | export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
55 |

--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Tabs({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof TabsPrimitive.Root>) {
12 |   return (
13 |     <TabsPrimitive.Root
14 |       data-slot="tabs"
15 |       className={cn("flex flex-col gap-2", className)}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | function TabsList({
22 |   className,
23 |   ...props
24 | }: React.ComponentProps<typeof TabsPrimitive.List>) {
25 |   return (
26 |     <TabsPrimitive.List
27 |       data-slot="tabs-list"
28 |       className={cn(
29 |         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
30 |         className
31 |       )}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function TabsTrigger({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
41 |   return (
42 |     <TabsPrimitive.Trigger
43 |       data-slot="tabs-trigger"
44 |       className={cn(
45 |         "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   )
51 | }
52 | 
53 | function TabsContent({
54 |   className,
55 |   ...props
56 | }: React.ComponentProps<typeof TabsPrimitive.Content>) {
57 |   return (
58 |     <TabsPrimitive.Content
59 |       data-slot="tabs-content"
60 |       className={cn("flex-1 outline-none", className)}
61 |       {...props}
62 |     />
63 |   )
64 | }
65 | 
66 | export { Tabs, TabsList, TabsTrigger, TabsContent }
67 |

--------------------------------------------------------------------------------
/src/components/ui/toggle-group.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 5 | import { type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | import { toggleVariants } from "@/components/ui/toggle"
 9 | 
10 | const ToggleGroupContext = React.createContext<
11 |   VariantProps<typeof toggleVariants>
12 | >({
13 |   size: "default",
14 |   variant: "default",
15 | })
16 | 
17 | function ToggleGroup({
18 |   className,
19 |   variant,
20 |   size,
21 |   children,
22 |   ...props
23 | }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
24 |   VariantProps<typeof toggleVariants>) {
25 |   return (
26 |     <ToggleGroupPrimitive.Root
27 |       data-slot="toggle-group"
28 |       data-variant={variant}
29 |       data-size={size}
30 |       className={cn(
31 |         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       <ToggleGroupContext.Provider value={{ variant, size }}>
37 |         {children}
38 |       </ToggleGroupContext.Provider>
39 |     </ToggleGroupPrimitive.Root>
40 |   )
41 | }
42 | 
43 | function ToggleGroupItem({
44 |   className,
45 |   children,
46 |   variant,
47 |   size,
48 |   ...props
49 | }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
50 |   VariantProps<typeof toggleVariants>) {
51 |   const context = React.useContext(ToggleGroupContext)
52 | 
53 |   return (
54 |     <ToggleGroupPrimitive.Item
55 |       data-slot="toggle-group-item"
56 |       data-variant={context.variant || variant}
57 |       data-size={context.size || size}
58 |       className={cn(
59 |         toggleVariants({
60 |           variant: context.variant || variant,
61 |           size: context.size || size,
62 |         }),
63 |         "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
64 |         className
65 |       )}
66 |       {...props}
67 |     >
68 |       {children}
69 |     </ToggleGroupPrimitive.Item>
70 |   )
71 | }
72 | 
73 | export { ToggleGroup, ToggleGroupItem }
74 |

--------------------------------------------------------------------------------
/src/components/ui/slider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as SliderPrimitive from "@radix-ui/react-slider"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Slider({
 9 |   className,
10 |   defaultValue,
11 |   value,
12 |   min = 0,
13 |   max = 100,
14 |   ...props
15 | }: React.ComponentProps<typeof SliderPrimitive.Root>) {
16 |   const _values = React.useMemo(
17 |     () =>
18 |       Array.isArray(value)
19 |         ? value
20 |         : Array.isArray(defaultValue)
21 |           ? defaultValue
22 |           : [min, max],
23 |     [value, defaultValue, min, max]
24 |   )
25 | 
26 |   return (
27 |     <SliderPrimitive.Root
28 |       data-slot="slider"
29 |       defaultValue={defaultValue}
30 |       value={value}
31 |       min={min}
32 |       max={max}
33 |       className={cn(
34 |         "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
35 |         className
36 |       )}
37 |       {...props}
38 |     >
39 |       <SliderPrimitive.Track
40 |         data-slot="slider-track"
41 |         className={cn(
42 |           "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
43 |         )}
44 |       >
45 |         <SliderPrimitive.Range
46 |           data-slot="slider-range"
47 |           className={cn(
48 |             "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
49 |           )}
50 |         />
51 |       </SliderPrimitive.Track>
52 |       {Array.from({ length: _values.length }, (_, index) => (
53 |         <SliderPrimitive.Thumb
54 |           data-slot="slider-thumb"
55 |           key={index}
56 |           className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
57 |         />
58 |       ))}
59 |     </SliderPrimitive.Root>
60 |   )
61 | }
62 | 
63 | export { Slider }
64 |

--------------------------------------------------------------------------------
/src/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 3 | import { ChevronDownIcon } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | function Accordion({
 8 |   ...props
 9 | }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
10 |   return <AccordionPrimitive.Root data-slot="accordion" {...props} />
11 | }
12 | 
13 | function AccordionItem({
14 |   className,
15 |   ...props
16 | }: React.ComponentProps<typeof AccordionPrimitive.Item>) {
17 |   return (
18 |     <AccordionPrimitive.Item
19 |       data-slot="accordion-item"
20 |       className={cn("border-b last:border-b-0", className)}
21 |       {...props}
22 |     />
23 |   )
24 | }
25 | 
26 | function AccordionTrigger({
27 |   className,
28 |   children,
29 |   ...props
30 | }: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
31 |   return (
32 |     <AccordionPrimitive.Header className="flex">
33 |       <AccordionPrimitive.Trigger
34 |         data-slot="accordion-trigger"
35 |         className={cn(
36 |           "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
37 |           className
38 |         )}
39 |         {...props}
40 |       >
41 |         {children}
42 |         <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
43 |       </AccordionPrimitive.Trigger>
44 |     </AccordionPrimitive.Header>
45 |   )
46 | }
47 | 
48 | function AccordionContent({
49 |   className,
50 |   children,
51 |   ...props
52 | }: React.ComponentProps<typeof AccordionPrimitive.Content>) {
53 |   return (
54 |     <AccordionPrimitive.Content
55 |       data-slot="accordion-content"
56 |       className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
57 |       {...props}
58 |     >
59 |       <div className={cn("pt-0 pb-4", className)}>{children}</div>
60 |     </AccordionPrimitive.Content>
61 |   )
62 | }
63 | 
64 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
65 |

--------------------------------------------------------------------------------
/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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
16 |         outline:
17 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
20 |         ghost:
21 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
22 |         link: "text-primary underline-offset-4 hover:underline",
23 |       },
24 |       size: {
25 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
26 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
27 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
28 |         icon: "size-9",
29 |       },
30 |     },
31 |     defaultVariants: {
32 |       variant: "default",
33 |       size: "default",
34 |     },
35 |   }
36 | )
37 | 
38 | function Button({
39 |   className,
40 |   variant,
41 |   size,
42 |   asChild = false,
43 |   ...props
44 | }: React.ComponentProps<"button"> &
45 |   VariantProps<typeof buttonVariants> & {
46 |     asChild?: boolean
47 |   }) {
48 |   const Comp = asChild ? Slot : "button"
49 | 
50 |   return (
51 |     <Comp
52 |       data-slot="button"
53 |       className={cn(buttonVariants({ variant, size, className }))}
54 |       {...props}
55 |     />
56 |   )
57 | }
58 | 
59 | export { Button, buttonVariants }
60 |

--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 |

--------------------------------------------------------------------------------
/src/components/ui/input-otp.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { OTPInput, OTPInputContext } from "input-otp"
 5 | import { MinusIcon } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | function InputOTP({
10 |   className,
11 |   containerClassName,
12 |   ...props
13 | }: React.ComponentProps<typeof OTPInput> & {
14 |   containerClassName?: string
15 | }) {
16 |   return (
17 |     <OTPInput
18 |       data-slot="input-otp"
19 |       containerClassName={cn(
20 |         "flex items-center gap-2 has-disabled:opacity-50",
21 |         containerClassName
22 |       )}
23 |       className={cn("disabled:cursor-not-allowed", className)}
24 |       {...props}
25 |     />
26 |   )
27 | }
28 | 
29 | function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
30 |   return (
31 |     <div
32 |       data-slot="input-otp-group"
33 |       className={cn("flex items-center", className)}
34 |       {...props}
35 |     />
36 |   )
37 | }
38 | 
39 | function InputOTPSlot({
40 |   index,
41 |   className,
42 |   ...props
43 | }: React.ComponentProps<"div"> & {
44 |   index: number
45 | }) {
46 |   const inputOTPContext = React.useContext(OTPInputContext)
47 |   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
48 | 
49 |   return (
50 |     <div
51 |       data-slot="input-otp-slot"
52 |       data-active={isActive}
53 |       className={cn(
54 |         "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
55 |         className
56 |       )}
57 |       {...props}
58 |     >
59 |       {char}
60 |       {hasFakeCaret && (
61 |         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
62 |           <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
63 |         </div>
64 |       )}
65 |     </div>
66 |   )
67 | }
68 | 
69 | function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
70 |   return (
71 |     <div data-slot="input-otp-separator" role="separator" {...props}>
72 |       <MinusIcon />
73 |     </div>
74 |   )
75 | }
76 | 
77 | export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
78 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "temu-v0",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@hookform/resolvers": "^5.0.1",
14 |     "@radix-ui/react-accordion": "^1.2.8",
15 |     "@radix-ui/react-alert-dialog": "^1.1.11",
16 |     "@radix-ui/react-aspect-ratio": "^1.1.4",
17 |     "@radix-ui/react-avatar": "^1.1.7",
18 |     "@radix-ui/react-checkbox": "^1.2.3",
19 |     "@radix-ui/react-collapsible": "^1.1.8",
20 |     "@radix-ui/react-context-menu": "^2.2.12",
21 |     "@radix-ui/react-dialog": "^1.1.11",
22 |     "@radix-ui/react-dropdown-menu": "^2.1.12",
23 |     "@radix-ui/react-hover-card": "^1.1.11",
24 |     "@radix-ui/react-label": "^2.1.4",
25 |     "@radix-ui/react-menubar": "^1.1.12",
26 |     "@radix-ui/react-navigation-menu": "^1.2.10",
27 |     "@radix-ui/react-popover": "^1.1.11",
28 |     "@radix-ui/react-progress": "^1.1.4",
29 |     "@radix-ui/react-radio-group": "^1.3.4",
30 |     "@radix-ui/react-scroll-area": "^1.2.6",
31 |     "@radix-ui/react-select": "^2.2.2",
32 |     "@radix-ui/react-separator": "^1.1.4",
33 |     "@radix-ui/react-slider": "^1.3.2",
34 |     "@radix-ui/react-slot": "^1.2.0",
35 |     "@radix-ui/react-switch": "^1.2.2",
36 |     "@radix-ui/react-tabs": "^1.1.9",
37 |     "@radix-ui/react-toggle": "^1.1.6",
38 |     "@radix-ui/react-toggle-group": "^1.1.7",
39 |     "@radix-ui/react-tooltip": "^1.2.4",
40 |     "@tailwindcss/vite": "^4.1.5",
41 |     "class-variance-authority": "^0.7.1",
42 |     "clsx": "^2.1.1",
43 |     "cmdk": "^1.1.1",
44 |     "date-fns": "^4.1.0",
45 |     "embla-carousel-react": "^8.6.0",
46 |     "input-otp": "^1.4.2",
47 |     "lucide-react": "^0.507.0",
48 |     "next-themes": "^0.4.6",
49 |     "react": "^19.1.0",
50 |     "react-day-picker": "8.10.1",
51 |     "react-dom": "^19.1.0",
52 |     "react-hook-form": "^7.56.2",
53 |     "react-resizable-panels": "^3.0.1",
54 |     "recharts": "^2.15.3",
55 |     "sonner": "^2.0.3",
56 |     "tailwind-merge": "^3.2.0",
57 |     "tailwindcss": "^4.1.5",
58 |     "vaul": "^1.1.2",
59 |     "zod": "^3.24.4"
60 |   },
61 |   "devDependencies": {
62 |     "@eslint/js": "^9.25.0",
63 |     "@types/node": "^22.15.3",
64 |     "@types/react": "^19.1.2",
65 |     "@types/react-dom": "^19.1.2",
66 |     "@vitejs/plugin-react-swc": "^3.9.0",
67 |     "eslint": "^9.25.0",
68 |     "eslint-plugin-react-hooks": "^5.2.0",
69 |     "eslint-plugin-react-refresh": "^0.4.19",
70 |     "globals": "^16.0.0",
71 |     "tw-animate-css": "^1.2.9",
72 |     "typescript": "~5.8.3",
73 |     "typescript-eslint": "^8.30.1",
74 |     "vite": "^6.3.5"
75 |   }
76 | }
77 |

--------------------------------------------------------------------------------
/src/components/ui/breadcrumb.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Slot } from "@radix-ui/react-slot"
  3 | import { ChevronRight, MoreHorizontal } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
  8 |   return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
  9 | }
 10 | 
 11 | function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 12 |   return (
 13 |     <ol
 14 |       data-slot="breadcrumb-list"
 15 |       className={cn(
 16 |         "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
 17 |         className
 18 |       )}
 19 |       {...props}
 20 |     />
 21 |   )
 22 | }
 23 | 
 24 | function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 25 |   return (
 26 |     <li
 27 |       data-slot="breadcrumb-item"
 28 |       className={cn("inline-flex items-center gap-1.5", className)}
 29 |       {...props}
 30 |     />
 31 |   )
 32 | }
 33 | 
 34 | function BreadcrumbLink({
 35 |   asChild,
 36 |   className,
 37 |   ...props
 38 | }: React.ComponentProps<"a"> & {
 39 |   asChild?: boolean
 40 | }) {
 41 |   const Comp = asChild ? Slot : "a"
 42 | 
 43 |   return (
 44 |     <Comp
 45 |       data-slot="breadcrumb-link"
 46 |       className={cn("hover:text-foreground transition-colors", className)}
 47 |       {...props}
 48 |     />
 49 |   )
 50 | }
 51 | 
 52 | function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 53 |   return (
 54 |     <span
 55 |       data-slot="breadcrumb-page"
 56 |       role="link"
 57 |       aria-disabled="true"
 58 |       aria-current="page"
 59 |       className={cn("text-foreground font-normal", className)}
 60 |       {...props}
 61 |     />
 62 |   )
 63 | }
 64 | 
 65 | function BreadcrumbSeparator({
 66 |   children,
 67 |   className,
 68 |   ...props
 69 | }: React.ComponentProps<"li">) {
 70 |   return (
 71 |     <li
 72 |       data-slot="breadcrumb-separator"
 73 |       role="presentation"
 74 |       aria-hidden="true"
 75 |       className={cn("[&>svg]:size-3.5", className)}
 76 |       {...props}
 77 |     >
 78 |       {children ?? <ChevronRight />}
 79 |     </li>
 80 |   )
 81 | }
 82 | 
 83 | function BreadcrumbEllipsis({
 84 |   className,
 85 |   ...props
 86 | }: React.ComponentProps<"span">) {
 87 |   return (
 88 |     <span
 89 |       data-slot="breadcrumb-ellipsis"
 90 |       role="presentation"
 91 |       aria-hidden="true"
 92 |       className={cn("flex size-9 items-center justify-center", className)}
 93 |       {...props}
 94 |     >
 95 |       <MoreHorizontal className="size-4" />
 96 |       <span className="sr-only">More</span>
 97 |     </span>
 98 |   )
 99 | }
100 | 
101 | export {
102 |   Breadcrumb,
103 |   BreadcrumbList,
104 |   BreadcrumbItem,
105 |   BreadcrumbLink,
106 |   BreadcrumbPage,
107 |   BreadcrumbSeparator,
108 |   BreadcrumbEllipsis,
109 | }
110 |

--------------------------------------------------------------------------------
/src/components/ui/table.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | 
  3 | import { cn } from "@/lib/utils"
  4 | 
  5 | function Table({ className, ...props }: React.ComponentProps<"table">) {
  6 |   return (
  7 |     <div
  8 |       data-slot="table-container"
  9 |       className="relative w-full overflow-x-auto"
 10 |     >
 11 |       <table
 12 |         data-slot="table"
 13 |         className={cn("w-full caption-bottom text-sm", className)}
 14 |         {...props}
 15 |       />
 16 |     </div>
 17 |   )
 18 | }
 19 | 
 20 | function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
 21 |   return (
 22 |     <thead
 23 |       data-slot="table-header"
 24 |       className={cn("[&_tr]:border-b", className)}
 25 |       {...props}
 26 |     />
 27 |   )
 28 | }
 29 | 
 30 | function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
 31 |   return (
 32 |     <tbody
 33 |       data-slot="table-body"
 34 |       className={cn("[&_tr:last-child]:border-0", className)}
 35 |       {...props}
 36 |     />
 37 |   )
 38 | }
 39 | 
 40 | function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
 41 |   return (
 42 |     <tfoot
 43 |       data-slot="table-footer"
 44 |       className={cn(
 45 |         "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
 46 |         className
 47 |       )}
 48 |       {...props}
 49 |     />
 50 |   )
 51 | }
 52 | 
 53 | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
 54 |   return (
 55 |     <tr
 56 |       data-slot="table-row"
 57 |       className={cn(
 58 |         "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 59 |         className
 60 |       )}
 61 |       {...props}
 62 |     />
 63 |   )
 64 | }
 65 | 
 66 | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 67 |   return (
 68 |     <th
 69 |       data-slot="table-head"
 70 |       className={cn(
 71 |         "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 72 |         className
 73 |       )}
 74 |       {...props}
 75 |     />
 76 |   )
 77 | }
 78 | 
 79 | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
 80 |   return (
 81 |     <td
 82 |       data-slot="table-cell"
 83 |       className={cn(
 84 |         "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
 85 |         className
 86 |       )}
 87 |       {...props}
 88 |     />
 89 |   )
 90 | }
 91 | 
 92 | function TableCaption({
 93 |   className,
 94 |   ...props
 95 | }: React.ComponentProps<"caption">) {
 96 |   return (
 97 |     <caption
 98 |       data-slot="table-caption"
 99 |       className={cn("text-muted-foreground mt-4 text-sm", className)}
100 |       {...props}
101 |     />
102 |   )
103 | }
104 | 
105 | export {
106 |   Table,
107 |   TableHeader,
108 |   TableBody,
109 |   TableFooter,
110 |   TableHead,
111 |   TableRow,
112 |   TableCell,
113 |   TableCaption,
114 | }
115 |

--------------------------------------------------------------------------------
/src/components/ui/calendar.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { ChevronLeft, ChevronRight } from "lucide-react"
 3 | import { DayPicker } from "react-day-picker"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | import { buttonVariants } from "@/components/ui/button"
 7 | 
 8 | function Calendar({
 9 |   className,
10 |   classNames,
11 |   showOutsideDays = true,
12 |   ...props
13 | }: React.ComponentProps<typeof DayPicker>) {
14 |   return (
15 |     <DayPicker
16 |       showOutsideDays={showOutsideDays}
17 |       className={cn("p-3", className)}
18 |       classNames={{
19 |         months: "flex flex-col sm:flex-row gap-2",
20 |         month: "flex flex-col gap-4",
21 |         caption: "flex justify-center pt-1 relative items-center w-full",
22 |         caption_label: "text-sm font-medium",
23 |         nav: "flex items-center gap-1",
24 |         nav_button: cn(
25 |           buttonVariants({ variant: "outline" }),
26 |           "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
27 |         ),
28 |         nav_button_previous: "absolute left-1",
29 |         nav_button_next: "absolute right-1",
30 |         table: "w-full border-collapse space-x-1",
31 |         head_row: "flex",
32 |         head_cell:
33 |           "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
34 |         row: "flex w-full mt-2",
35 |         cell: cn(
36 |           "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
37 |           props.mode === "range"
38 |             ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
39 |             : "[&:has([aria-selected])]:rounded-md"
40 |         ),
41 |         day: cn(
42 |           buttonVariants({ variant: "ghost" }),
43 |           "size-8 p-0 font-normal aria-selected:opacity-100"
44 |         ),
45 |         day_range_start:
46 |           "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
47 |         day_range_end:
48 |           "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
49 |         day_selected:
50 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
51 |         day_today: "bg-accent text-accent-foreground",
52 |         day_outside:
53 |           "day-outside text-muted-foreground aria-selected:text-muted-foreground",
54 |         day_disabled: "text-muted-foreground opacity-50",
55 |         day_range_middle:
56 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
57 |         day_hidden: "invisible",
58 |         ...classNames,
59 |       }}
60 |       components={{
61 |         IconLeft: ({ className, ...props }) => (
62 |           <ChevronLeft className={cn("size-4", className)} {...props} />
63 |         ),
64 |         IconRight: ({ className, ...props }) => (
65 |           <ChevronRight className={cn("size-4", className)} {...props} />
66 |         ),
67 |       }}
68 |       {...props}
69 |     />
70 |   )
71 | }
72 | 
73 | export { Calendar }
74 |

--------------------------------------------------------------------------------
/src/components/ui/pagination.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import {
  3 |   ChevronLeftIcon,
  4 |   ChevronRightIcon,
  5 |   MoreHorizontalIcon,
  6 | } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | import { Button, buttonVariants } from "@/components/ui/button"
 10 | 
 11 | function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
 12 |   return (
 13 |     <nav
 14 |       role="navigation"
 15 |       aria-label="pagination"
 16 |       data-slot="pagination"
 17 |       className={cn("mx-auto flex w-full justify-center", className)}
 18 |       {...props}
 19 |     />
 20 |   )
 21 | }
 22 | 
 23 | function PaginationContent({
 24 |   className,
 25 |   ...props
 26 | }: React.ComponentProps<"ul">) {
 27 |   return (
 28 |     <ul
 29 |       data-slot="pagination-content"
 30 |       className={cn("flex flex-row items-center gap-1", className)}
 31 |       {...props}
 32 |     />
 33 |   )
 34 | }
 35 | 
 36 | function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 37 |   return <li data-slot="pagination-item" {...props} />
 38 | }
 39 | 
 40 | type PaginationLinkProps = {
 41 |   isActive?: boolean
 42 | } & Pick<React.ComponentProps<typeof Button>, "size"> &
 43 |   React.ComponentProps<"a">
 44 | 
 45 | function PaginationLink({
 46 |   className,
 47 |   isActive,
 48 |   size = "icon",
 49 |   ...props
 50 | }: PaginationLinkProps) {
 51 |   return (
 52 |     <a
 53 |       aria-current={isActive ? "page" : undefined}
 54 |       data-slot="pagination-link"
 55 |       data-active={isActive}
 56 |       className={cn(
 57 |         buttonVariants({
 58 |           variant: isActive ? "outline" : "ghost",
 59 |           size,
 60 |         }),
 61 |         className
 62 |       )}
 63 |       {...props}
 64 |     />
 65 |   )
 66 | }
 67 | 
 68 | function PaginationPrevious({
 69 |   className,
 70 |   ...props
 71 | }: React.ComponentProps<typeof PaginationLink>) {
 72 |   return (
 73 |     <PaginationLink
 74 |       aria-label="Go to previous page"
 75 |       size="default"
 76 |       className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
 77 |       {...props}
 78 |     >
 79 |       <ChevronLeftIcon />
 80 |       <span className="hidden sm:block">Previous</span>
 81 |     </PaginationLink>
 82 |   )
 83 | }
 84 | 
 85 | function PaginationNext({
 86 |   className,
 87 |   ...props
 88 | }: React.ComponentProps<typeof PaginationLink>) {
 89 |   return (
 90 |     <PaginationLink
 91 |       aria-label="Go to next page"
 92 |       size="default"
 93 |       className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
 94 |       {...props}
 95 |     >
 96 |       <span className="hidden sm:block">Next</span>
 97 |       <ChevronRightIcon />
 98 |     </PaginationLink>
 99 |   )
100 | }
101 | 
102 | function PaginationEllipsis({
103 |   className,
104 |   ...props
105 | }: React.ComponentProps<"span">) {
106 |   return (
107 |     <span
108 |       aria-hidden
109 |       data-slot="pagination-ellipsis"
110 |       className={cn("flex size-9 items-center justify-center", className)}
111 |       {...props}
112 |     >
113 |       <MoreHorizontalIcon className="size-4" />
114 |       <span className="sr-only">More pages</span>
115 |     </span>
116 |   )
117 | }
118 | 
119 | export {
120 |   Pagination,
121 |   PaginationContent,
122 |   PaginationLink,
123 |   PaginationItem,
124 |   PaginationPrevious,
125 |   PaginationNext,
126 |   PaginationEllipsis,
127 | }
128 |

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

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

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --radius-sm: calc(var(--radius) - 4px);
  8 |   --radius-md: calc(var(--radius) - 2px);
  9 |   --radius-lg: var(--radius);
 10 |   --radius-xl: calc(var(--radius) + 4px);
 11 |   --color-background: var(--background);
 12 |   --color-foreground: var(--foreground);
 13 |   --color-card: var(--card);
 14 |   --color-card-foreground: var(--card-foreground);
 15 |   --color-popover: var(--popover);
 16 |   --color-popover-foreground: var(--popover-foreground);
 17 |   --color-primary: var(--primary);
 18 |   --color-primary-foreground: var(--primary-foreground);
 19 |   --color-secondary: var(--secondary);
 20 |   --color-secondary-foreground: var(--secondary-foreground);
 21 |   --color-muted: var(--muted);
 22 |   --color-muted-foreground: var(--muted-foreground);
 23 |   --color-accent: var(--accent);
 24 |   --color-accent-foreground: var(--accent-foreground);
 25 |   --color-destructive: var(--destructive);
 26 |   --color-border: var(--border);
 27 |   --color-input: var(--input);
 28 |   --color-ring: var(--ring);
 29 |   --color-chart-1: var(--chart-1);
 30 |   --color-chart-2: var(--chart-2);
 31 |   --color-chart-3: var(--chart-3);
 32 |   --color-chart-4: var(--chart-4);
 33 |   --color-chart-5: var(--chart-5);
 34 |   --color-sidebar: var(--sidebar);
 35 |   --color-sidebar-foreground: var(--sidebar-foreground);
 36 |   --color-sidebar-primary: var(--sidebar-primary);
 37 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 38 |   --color-sidebar-accent: var(--sidebar-accent);
 39 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 40 |   --color-sidebar-border: var(--sidebar-border);
 41 |   --color-sidebar-ring: var(--sidebar-ring);
 42 | }
 43 | 
 44 | :root {
 45 |   --radius: 0.625rem;
 46 |   --background: oklch(1 0 0);
 47 |   --foreground: oklch(0.145 0 0);
 48 |   --card: oklch(1 0 0);
 49 |   --card-foreground: oklch(0.145 0 0);
 50 |   --popover: oklch(1 0 0);
 51 |   --popover-foreground: oklch(0.145 0 0);
 52 |   --primary: oklch(0.205 0 0);
 53 |   --primary-foreground: oklch(0.985 0 0);
 54 |   --secondary: oklch(0.97 0 0);
 55 |   --secondary-foreground: oklch(0.205 0 0);
 56 |   --muted: oklch(0.97 0 0);
 57 |   --muted-foreground: oklch(0.556 0 0);
 58 |   --accent: oklch(0.97 0 0);
 59 |   --accent-foreground: oklch(0.205 0 0);
 60 |   --destructive: oklch(0.577 0.245 27.325);
 61 |   --border: oklch(0.922 0 0);
 62 |   --input: oklch(0.922 0 0);
 63 |   --ring: oklch(0.708 0 0);
 64 |   --chart-1: oklch(0.646 0.222 41.116);
 65 |   --chart-2: oklch(0.6 0.118 184.704);
 66 |   --chart-3: oklch(0.398 0.07 227.392);
 67 |   --chart-4: oklch(0.828 0.189 84.429);
 68 |   --chart-5: oklch(0.769 0.188 70.08);
 69 |   --sidebar: oklch(0.985 0 0);
 70 |   --sidebar-foreground: oklch(0.145 0 0);
 71 |   --sidebar-primary: oklch(0.205 0 0);
 72 |   --sidebar-primary-foreground: oklch(0.985 0 0);
 73 |   --sidebar-accent: oklch(0.97 0 0);
 74 |   --sidebar-accent-foreground: oklch(0.205 0 0);
 75 |   --sidebar-border: oklch(0.922 0 0);
 76 |   --sidebar-ring: oklch(0.708 0 0);
 77 | }
 78 | 
 79 | .dark {
 80 |   --background: oklch(0.145 0 0);
 81 |   --foreground: oklch(0.985 0 0);
 82 |   --card: oklch(0.205 0 0);
 83 |   --card-foreground: oklch(0.985 0 0);
 84 |   --popover: oklch(0.205 0 0);
 85 |   --popover-foreground: oklch(0.985 0 0);
 86 |   --primary: oklch(0.922 0 0);
 87 |   --primary-foreground: oklch(0.205 0 0);
 88 |   --secondary: oklch(0.269 0 0);
 89 |   --secondary-foreground: oklch(0.985 0 0);
 90 |   --muted: oklch(0.269 0 0);
 91 |   --muted-foreground: oklch(0.708 0 0);
 92 |   --accent: oklch(0.269 0 0);
 93 |   --accent-foreground: oklch(0.985 0 0);
 94 |   --destructive: oklch(0.704 0.191 22.216);
 95 |   --border: oklch(1 0 0 / 10%);
 96 |   --input: oklch(1 0 0 / 15%);
 97 |   --ring: oklch(0.556 0 0);
 98 |   --chart-1: oklch(0.488 0.243 264.376);
 99 |   --chart-2: oklch(0.696 0.17 162.48);
100 |   --chart-3: oklch(0.769 0.188 70.08);
101 |   --chart-4: oklch(0.627 0.265 303.9);
102 |   --chart-5: oklch(0.645 0.246 16.439);
103 |   --sidebar: oklch(0.205 0 0);
104 |   --sidebar-foreground: oklch(0.985 0 0);
105 |   --sidebar-primary: oklch(0.488 0.243 264.376);
106 |   --sidebar-primary-foreground: oklch(0.985 0 0);
107 |   --sidebar-accent: oklch(0.269 0 0);
108 |   --sidebar-accent-foreground: oklch(0.985 0 0);
109 |   --sidebar-border: oklch(1 0 0 / 10%);
110 |   --sidebar-ring: oklch(0.556 0 0);
111 | }
112 | 
113 | @layer base {
114 |   * {
115 |     @apply border-border outline-ring/50;
116 |   }
117 |   body {
118 |     @apply bg-background text-foreground;
119 |   }
120 | }
121 |

--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { buttonVariants } from "@/components/ui/button"
  8 | 
  9 | function AlertDialog({
 10 |   ...props
 11 | }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
 12 |   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 13 | }
 14 | 
 15 | function AlertDialogTrigger({
 16 |   ...props
 17 | }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
 18 |   return (
 19 |     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
 20 |   )
 21 | }
 22 | 
 23 | function AlertDialogPortal({
 24 |   ...props
 25 | }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
 26 |   return (
 27 |     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
 28 |   )
 29 | }
 30 | 
 31 | function AlertDialogOverlay({
 32 |   className,
 33 |   ...props
 34 | }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
 35 |   return (
 36 |     <AlertDialogPrimitive.Overlay
 37 |       data-slot="alert-dialog-overlay"
 38 |       className={cn(
 39 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     />
 44 |   )
 45 | }
 46 | 
 47 | function AlertDialogContent({
 48 |   className,
 49 |   ...props
 50 | }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
 51 |   return (
 52 |     <AlertDialogPortal>
 53 |       <AlertDialogOverlay />
 54 |       <AlertDialogPrimitive.Content
 55 |         data-slot="alert-dialog-content"
 56 |         className={cn(
 57 |           "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 58 |           className
 59 |         )}
 60 |         {...props}
 61 |       />
 62 |     </AlertDialogPortal>
 63 |   )
 64 | }
 65 | 
 66 | function AlertDialogHeader({
 67 |   className,
 68 |   ...props
 69 | }: React.ComponentProps<"div">) {
 70 |   return (
 71 |     <div
 72 |       data-slot="alert-dialog-header"
 73 |       className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
 74 |       {...props}
 75 |     />
 76 |   )
 77 | }
 78 | 
 79 | function AlertDialogFooter({
 80 |   className,
 81 |   ...props
 82 | }: React.ComponentProps<"div">) {
 83 |   return (
 84 |     <div
 85 |       data-slot="alert-dialog-footer"
 86 |       className={cn(
 87 |         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 88 |         className
 89 |       )}
 90 |       {...props}
 91 |     />
 92 |   )
 93 | }
 94 | 
 95 | function AlertDialogTitle({
 96 |   className,
 97 |   ...props
 98 | }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
 99 |   return (
100 |     <AlertDialogPrimitive.Title
101 |       data-slot="alert-dialog-title"
102 |       className={cn("text-lg font-semibold", className)}
103 |       {...props}
104 |     />
105 |   )
106 | }
107 | 
108 | function AlertDialogDescription({
109 |   className,
110 |   ...props
111 | }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
112 |   return (
113 |     <AlertDialogPrimitive.Description
114 |       data-slot="alert-dialog-description"
115 |       className={cn("text-muted-foreground text-sm", className)}
116 |       {...props}
117 |     />
118 |   )
119 | }
120 | 
121 | function AlertDialogAction({
122 |   className,
123 |   ...props
124 | }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
125 |   return (
126 |     <AlertDialogPrimitive.Action
127 |       className={cn(buttonVariants(), className)}
128 |       {...props}
129 |     />
130 |   )
131 | }
132 | 
133 | function AlertDialogCancel({
134 |   className,
135 |   ...props
136 | }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
137 |   return (
138 |     <AlertDialogPrimitive.Cancel
139 |       className={cn(buttonVariants({ variant: "outline" }), className)}
140 |       {...props}
141 |     />
142 |   )
143 | }
144 | 
145 | export {
146 |   AlertDialog,
147 |   AlertDialogPortal,
148 |   AlertDialogOverlay,
149 |   AlertDialogTrigger,
150 |   AlertDialogContent,
151 |   AlertDialogHeader,
152 |   AlertDialogFooter,
153 |   AlertDialogTitle,
154 |   AlertDialogDescription,
155 |   AlertDialogAction,
156 |   AlertDialogCancel,
157 | }
158 |

--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import { Drawer as DrawerPrimitive } from "vaul"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | 
  6 | function Drawer({
  7 |   ...props
  8 | }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
  9 |   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
 10 | }
 11 | 
 12 | function DrawerTrigger({
 13 |   ...props
 14 | }: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
 15 |   return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
 16 | }
 17 | 
 18 | function DrawerPortal({
 19 |   ...props
 20 | }: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
 21 |   return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
 22 | }
 23 | 
 24 | function DrawerClose({
 25 |   ...props
 26 | }: React.ComponentProps<typeof DrawerPrimitive.Close>) {
 27 |   return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
 28 | }
 29 | 
 30 | function DrawerOverlay({
 31 |   className,
 32 |   ...props
 33 | }: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
 34 |   return (
 35 |     <DrawerPrimitive.Overlay
 36 |       data-slot="drawer-overlay"
 37 |       className={cn(
 38 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 39 |         className
 40 |       )}
 41 |       {...props}
 42 |     />
 43 |   )
 44 | }
 45 | 
 46 | function DrawerContent({
 47 |   className,
 48 |   children,
 49 |   ...props
 50 | }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
 51 |   return (
 52 |     <DrawerPortal data-slot="drawer-portal">
 53 |       <DrawerOverlay />
 54 |       <DrawerPrimitive.Content
 55 |         data-slot="drawer-content"
 56 |         className={cn(
 57 |           "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
 58 |           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
 59 |           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
 60 |           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
 61 |           "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
 62 |           className
 63 |         )}
 64 |         {...props}
 65 |       >
 66 |         <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
 67 |         {children}
 68 |       </DrawerPrimitive.Content>
 69 |     </DrawerPortal>
 70 |   )
 71 | }
 72 | 
 73 | function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
 74 |   return (
 75 |     <div
 76 |       data-slot="drawer-header"
 77 |       className={cn("flex flex-col gap-1.5 p-4", className)}
 78 |       {...props}
 79 |     />
 80 |   )
 81 | }
 82 | 
 83 | function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
 84 |   return (
 85 |     <div
 86 |       data-slot="drawer-footer"
 87 |       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 88 |       {...props}
 89 |     />
 90 |   )
 91 | }
 92 | 
 93 | function DrawerTitle({
 94 |   className,
 95 |   ...props
 96 | }: React.ComponentProps<typeof DrawerPrimitive.Title>) {
 97 |   return (
 98 |     <DrawerPrimitive.Title
 99 |       data-slot="drawer-title"
100 |       className={cn("text-foreground font-semibold", className)}
101 |       {...props}
102 |     />
103 |   )
104 | }
105 | 
106 | function DrawerDescription({
107 |   className,
108 |   ...props
109 | }: React.ComponentProps<typeof DrawerPrimitive.Description>) {
110 |   return (
111 |     <DrawerPrimitive.Description
112 |       data-slot="drawer-description"
113 |       className={cn("text-muted-foreground text-sm", className)}
114 |       {...props}
115 |     />
116 |   )
117 | }
118 | 
119 | export {
120 |   Drawer,
121 |   DrawerPortal,
122 |   DrawerOverlay,
123 |   DrawerTrigger,
124 |   DrawerClose,
125 |   DrawerContent,
126 |   DrawerHeader,
127 |   DrawerFooter,
128 |   DrawerTitle,
129 |   DrawerDescription,
130 | }
131 |

--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  3 | import { XIcon } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
  8 |   return <SheetPrimitive.Root data-slot="sheet" {...props} />
  9 | }
 10 | 
 11 | function SheetTrigger({
 12 |   ...props
 13 | }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
 14 |   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
 15 | }
 16 | 
 17 | function SheetClose({
 18 |   ...props
 19 | }: React.ComponentProps<typeof SheetPrimitive.Close>) {
 20 |   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
 21 | }
 22 | 
 23 | function SheetPortal({
 24 |   ...props
 25 | }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
 26 |   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
 27 | }
 28 | 
 29 | function SheetOverlay({
 30 |   className,
 31 |   ...props
 32 | }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
 33 |   return (
 34 |     <SheetPrimitive.Overlay
 35 |       data-slot="sheet-overlay"
 36 |       className={cn(
 37 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   )
 43 | }
 44 | 
 45 | function SheetContent({
 46 |   className,
 47 |   children,
 48 |   side = "right",
 49 |   ...props
 50 | }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 51 |   side?: "top" | "right" | "bottom" | "left"
 52 | }) {
 53 |   return (
 54 |     <SheetPortal>
 55 |       <SheetOverlay />
 56 |       <SheetPrimitive.Content
 57 |         data-slot="sheet-content"
 58 |         className={cn(
 59 |           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 60 |           side === "right" &&
 61 |             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
 62 |           side === "left" &&
 63 |             "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
 64 |           side === "top" &&
 65 |             "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 66 |           side === "bottom" &&
 67 |             "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 68 |           className
 69 |         )}
 70 |         {...props}
 71 |       >
 72 |         {children}
 73 |         <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
 74 |           <XIcon className="size-4" />
 75 |           <span className="sr-only">Close</span>
 76 |         </SheetPrimitive.Close>
 77 |       </SheetPrimitive.Content>
 78 |     </SheetPortal>
 79 |   )
 80 | }
 81 | 
 82 | function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
 83 |   return (
 84 |     <div
 85 |       data-slot="sheet-header"
 86 |       className={cn("flex flex-col gap-1.5 p-4", className)}
 87 |       {...props}
 88 |     />
 89 |   )
 90 | }
 91 | 
 92 | function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
 93 |   return (
 94 |     <div
 95 |       data-slot="sheet-footer"
 96 |       className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 97 |       {...props}
 98 |     />
 99 |   )
100 | }
101 | 
102 | function SheetTitle({
103 |   className,
104 |   ...props
105 | }: React.ComponentProps<typeof SheetPrimitive.Title>) {
106 |   return (
107 |     <SheetPrimitive.Title
108 |       data-slot="sheet-title"
109 |       className={cn("text-foreground font-semibold", className)}
110 |       {...props}
111 |     />
112 |   )
113 | }
114 | 
115 | function SheetDescription({
116 |   className,
117 |   ...props
118 | }: React.ComponentProps<typeof SheetPrimitive.Description>) {
119 |   return (
120 |     <SheetPrimitive.Description
121 |       data-slot="sheet-description"
122 |       className={cn("text-muted-foreground text-sm", className)}
123 |       {...props}
124 |     />
125 |   )
126 | }
127 | 
128 | export {
129 |   Sheet,
130 |   SheetTrigger,
131 |   SheetClose,
132 |   SheetContent,
133 |   SheetHeader,
134 |   SheetFooter,
135 |   SheetTitle,
136 |   SheetDescription,
137 | }
138 |

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

--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import useEmblaCarousel, {
  5 |   type UseEmblaCarouselType,
  6 | } from "embla-carousel-react"
  7 | import { ArrowLeft, ArrowRight } from "lucide-react"
  8 | 
  9 | import { cn } from "@/lib/utils"
 10 | import { Button } from "@/components/ui/button"
 11 | 
 12 | type CarouselApi = UseEmblaCarouselType[1]
 13 | type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
 14 | type CarouselOptions = UseCarouselParameters[0]
 15 | type CarouselPlugin = UseCarouselParameters[1]
 16 | 
 17 | type CarouselProps = {
 18 |   opts?: CarouselOptions
 19 |   plugins?: CarouselPlugin
 20 |   orientation?: "horizontal" | "vertical"
 21 |   setApi?: (api: CarouselApi) => void
 22 | }
 23 | 
 24 | type CarouselContextProps = {
 25 |   carouselRef: ReturnType<typeof useEmblaCarousel>[0]
 26 |   api: ReturnType<typeof useEmblaCarousel>[1]
 27 |   scrollPrev: () => void
 28 |   scrollNext: () => void
 29 |   canScrollPrev: boolean
 30 |   canScrollNext: boolean
 31 | } & CarouselProps
 32 | 
 33 | const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 34 | 
 35 | function useCarousel() {
 36 |   const context = React.useContext(CarouselContext)
 37 | 
 38 |   if (!context) {
 39 |     throw new Error("useCarousel must be used within a <Carousel />")
 40 |   }
 41 | 
 42 |   return context
 43 | }
 44 | 
 45 | function Carousel({
 46 |   orientation = "horizontal",
 47 |   opts,
 48 |   setApi,
 49 |   plugins,
 50 |   className,
 51 |   children,
 52 |   ...props
 53 | }: React.ComponentProps<"div"> & CarouselProps) {
 54 |   const [carouselRef, api] = useEmblaCarousel(
 55 |     {
 56 |       ...opts,
 57 |       axis: orientation === "horizontal" ? "x" : "y",
 58 |     },
 59 |     plugins
 60 |   )
 61 |   const [canScrollPrev, setCanScrollPrev] = React.useState(false)
 62 |   const [canScrollNext, setCanScrollNext] = React.useState(false)
 63 | 
 64 |   const onSelect = React.useCallback((api: CarouselApi) => {
 65 |     if (!api) return
 66 |     setCanScrollPrev(api.canScrollPrev())
 67 |     setCanScrollNext(api.canScrollNext())
 68 |   }, [])
 69 | 
 70 |   const scrollPrev = React.useCallback(() => {
 71 |     api?.scrollPrev()
 72 |   }, [api])
 73 | 
 74 |   const scrollNext = React.useCallback(() => {
 75 |     api?.scrollNext()
 76 |   }, [api])
 77 | 
 78 |   const handleKeyDown = React.useCallback(
 79 |     (event: React.KeyboardEvent<HTMLDivElement>) => {
 80 |       if (event.key === "ArrowLeft") {
 81 |         event.preventDefault()
 82 |         scrollPrev()
 83 |       } else if (event.key === "ArrowRight") {
 84 |         event.preventDefault()
 85 |         scrollNext()
 86 |       }
 87 |     },
 88 |     [scrollPrev, scrollNext]
 89 |   )
 90 | 
 91 |   React.useEffect(() => {
 92 |     if (!api || !setApi) return
 93 |     setApi(api)
 94 |   }, [api, setApi])
 95 | 
 96 |   React.useEffect(() => {
 97 |     if (!api) return
 98 |     onSelect(api)
 99 |     api.on("reInit", onSelect)
100 |     api.on("select", onSelect)
101 | 
102 |     return () => {
103 |       api?.off("select", onSelect)
104 |     }
105 |   }, [api, onSelect])
106 | 
107 |   return (
108 |     <CarouselContext.Provider
109 |       value={{
110 |         carouselRef,
111 |         api: api,
112 |         opts,
113 |         orientation:
114 |           orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
115 |         scrollPrev,
116 |         scrollNext,
117 |         canScrollPrev,
118 |         canScrollNext,
119 |       }}
120 |     >
121 |       <div
122 |         onKeyDownCapture={handleKeyDown}
123 |         className={cn("relative", className)}
124 |         role="region"
125 |         aria-roledescription="carousel"
126 |         data-slot="carousel"
127 |         {...props}
128 |       >
129 |         {children}
130 |       </div>
131 |     </CarouselContext.Provider>
132 |   )
133 | }
134 | 
135 | function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
136 |   const { carouselRef, orientation } = useCarousel()
137 | 
138 |   return (
139 |     <div
140 |       ref={carouselRef}
141 |       className="overflow-hidden"
142 |       data-slot="carousel-content"
143 |     >
144 |       <div
145 |         className={cn(
146 |           "flex",
147 |           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
148 |           className
149 |         )}
150 |         {...props}
151 |       />
152 |     </div>
153 |   )
154 | }
155 | 
156 | function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
157 |   const { orientation } = useCarousel()
158 | 
159 |   return (
160 |     <div
161 |       role="group"
162 |       aria-roledescription="slide"
163 |       data-slot="carousel-item"
164 |       className={cn(
165 |         "min-w-0 shrink-0 grow-0 basis-full",
166 |         orientation === "horizontal" ? "pl-4" : "pt-4",
167 |         className
168 |       )}
169 |       {...props}
170 |     />
171 |   )
172 | }
173 | 
174 | function CarouselPrevious({
175 |   className,
176 |   variant = "outline",
177 |   size = "icon",
178 |   ...props
179 | }: React.ComponentProps<typeof Button>) {
180 |   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
181 | 
182 |   return (
183 |     <Button
184 |       data-slot="carousel-previous"
185 |       variant={variant}
186 |       size={size}
187 |       className={cn(
188 |         "absolute size-8 rounded-full",
189 |         orientation === "horizontal"
190 |           ? "top-1/2 -left-12 -translate-y-1/2"
191 |           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
192 |         className
193 |       )}
194 |       disabled={!canScrollPrev}
195 |       onClick={scrollPrev}
196 |       {...props}
197 |     >
198 |       <ArrowLeft />
199 |       <span className="sr-only">Previous slide</span>
200 |     </Button>
201 |   )
202 | }
203 | 
204 | function CarouselNext({
205 |   className,
206 |   variant = "outline",
207 |   size = "icon",
208 |   ...props
209 | }: React.ComponentProps<typeof Button>) {
210 |   const { orientation, scrollNext, canScrollNext } = useCarousel()
211 | 
212 |   return (
213 |     <Button
214 |       data-slot="carousel-next"
215 |       variant={variant}
216 |       size={size}
217 |       className={cn(
218 |         "absolute size-8 rounded-full",
219 |         orientation === "horizontal"
220 |           ? "top-1/2 -right-12 -translate-y-1/2"
221 |           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
222 |         className
223 |       )}
224 |       disabled={!canScrollNext}
225 |       onClick={scrollNext}
226 |       {...props}
227 |     >
228 |       <ArrowRight />
229 |       <span className="sr-only">Next slide</span>
230 |     </Button>
231 |   )
232 | }
233 | 
234 | export {
235 |   type CarouselApi,
236 |   Carousel,
237 |   CarouselContent,
238 |   CarouselItem,
239 |   CarouselPrevious,
240 |   CarouselNext,
241 | }
242 |

--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SelectPrimitive from "@radix-ui/react-select"
  3 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | function Select({
  8 |   ...props
  9 | }: React.ComponentProps<typeof SelectPrimitive.Root>) {
 10 |   return <SelectPrimitive.Root data-slot="select" {...props} />
 11 | }
 12 | 
 13 | function SelectGroup({
 14 |   ...props
 15 | }: React.ComponentProps<typeof SelectPrimitive.Group>) {
 16 |   return <SelectPrimitive.Group data-slot="select-group" {...props} />
 17 | }
 18 | 
 19 | function SelectValue({
 20 |   ...props
 21 | }: React.ComponentProps<typeof SelectPrimitive.Value>) {
 22 |   return <SelectPrimitive.Value data-slot="select-value" {...props} />
 23 | }
 24 | 
 25 | function SelectTrigger({
 26 |   className,
 27 |   size = "default",
 28 |   children,
 29 |   ...props
 30 | }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
 31 |   size?: "sm" | "default"
 32 | }) {
 33 |   return (
 34 |     <SelectPrimitive.Trigger
 35 |       data-slot="select-trigger"
 36 |       data-size={size}
 37 |       className={cn(
 38 |         "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 39 |         className
 40 |       )}
 41 |       {...props}
 42 |     >
 43 |       {children}
 44 |       <SelectPrimitive.Icon asChild>
 45 |         <ChevronDownIcon className="size-4 opacity-50" />
 46 |       </SelectPrimitive.Icon>
 47 |     </SelectPrimitive.Trigger>
 48 |   )
 49 | }
 50 | 
 51 | function SelectContent({
 52 |   className,
 53 |   children,
 54 |   position = "popper",
 55 |   ...props
 56 | }: React.ComponentProps<typeof SelectPrimitive.Content>) {
 57 |   return (
 58 |     <SelectPrimitive.Portal>
 59 |       <SelectPrimitive.Content
 60 |         data-slot="select-content"
 61 |         className={cn(
 62 |           "bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
 63 |           position === "popper" &&
 64 |             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 65 |           className
 66 |         )}
 67 |         position={position}
 68 |         {...props}
 69 |       >
 70 |         <SelectScrollUpButton />
 71 |         <SelectPrimitive.Viewport
 72 |           className={cn(
 73 |             "p-1",
 74 |             position === "popper" &&
 75 |               "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
 76 |           )}
 77 |         >
 78 |           {children}
 79 |         </SelectPrimitive.Viewport>
 80 |         <SelectScrollDownButton />
 81 |       </SelectPrimitive.Content>
 82 |     </SelectPrimitive.Portal>
 83 |   )
 84 | }
 85 | 
 86 | function SelectLabel({
 87 |   className,
 88 |   ...props
 89 | }: React.ComponentProps<typeof SelectPrimitive.Label>) {
 90 |   return (
 91 |     <SelectPrimitive.Label
 92 |       data-slot="select-label"
 93 |       className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
 94 |       {...props}
 95 |     />
 96 |   )
 97 | }
 98 | 
 99 | function SelectItem({
100 |   className,
101 |   children,
102 |   ...props
103 | }: React.ComponentProps<typeof SelectPrimitive.Item>) {
104 |   return (
105 |     <SelectPrimitive.Item
106 |       data-slot="select-item"
107 |       className={cn(
108 |         "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
109 |         className
110 |       )}
111 |       {...props}
112 |     >
113 |       <span className="absolute right-2 flex size-3.5 items-center justify-center">
114 |         <SelectPrimitive.ItemIndicator>
115 |           <CheckIcon className="size-4" />
116 |         </SelectPrimitive.ItemIndicator>
117 |       </span>
118 |       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
119 |     </SelectPrimitive.Item>
120 |   )
121 | }
122 | 
123 | function SelectSeparator({
124 |   className,
125 |   ...props
126 | }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
127 |   return (
128 |     <SelectPrimitive.Separator
129 |       data-slot="select-separator"
130 |       className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
131 |       {...props}
132 |     />
133 |   )
134 | }
135 | 
136 | function SelectScrollUpButton({
137 |   className,
138 |   ...props
139 | }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
140 |   return (
141 |     <SelectPrimitive.ScrollUpButton
142 |       data-slot="select-scroll-up-button"
143 |       className={cn(
144 |         "flex cursor-default items-center justify-center py-1",
145 |         className
146 |       )}
147 |       {...props}
148 |     >
149 |       <ChevronUpIcon className="size-4" />
150 |     </SelectPrimitive.ScrollUpButton>
151 |   )
152 | }
153 | 
154 | function SelectScrollDownButton({
155 |   className,
156 |   ...props
157 | }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
158 |   return (
159 |     <SelectPrimitive.ScrollDownButton
160 |       data-slot="select-scroll-down-button"
161 |       className={cn(
162 |         "flex cursor-default items-center justify-center py-1",
163 |         className
164 |       )}
165 |       {...props}
166 |     >
167 |       <ChevronDownIcon className="size-4" />
168 |     </SelectPrimitive.ScrollDownButton>
169 |   )
170 | }
171 | 
172 | export {
173 |   Select,
174 |   SelectContent,
175 |   SelectGroup,
176 |   SelectItem,
177 |   SelectLabel,
178 |   SelectScrollDownButton,
179 |   SelectScrollUpButton,
180 |   SelectSeparator,
181 |   SelectTrigger,
182 |   SelectValue,
183 | }
184 |

--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
  3 | import { cva } from "class-variance-authority"
  4 | import { ChevronDownIcon } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | 
  8 | function NavigationMenu({
  9 |   className,
 10 |   children,
 11 |   viewport = true,
 12 |   ...props
 13 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
 14 |   viewport?: boolean
 15 | }) {
 16 |   return (
 17 |     <NavigationMenuPrimitive.Root
 18 |       data-slot="navigation-menu"
 19 |       data-viewport={viewport}
 20 |       className={cn(
 21 |         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
 22 |         className
 23 |       )}
 24 |       {...props}
 25 |     >
 26 |       {children}
 27 |       {viewport && <NavigationMenuViewport />}
 28 |     </NavigationMenuPrimitive.Root>
 29 |   )
 30 | }
 31 | 
 32 | function NavigationMenuList({
 33 |   className,
 34 |   ...props
 35 | }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
 36 |   return (
 37 |     <NavigationMenuPrimitive.List
 38 |       data-slot="navigation-menu-list"
 39 |       className={cn(
 40 |         "group flex flex-1 list-none items-center justify-center gap-1",
 41 |         className
 42 |       )}
 43 |       {...props}
 44 |     />
 45 |   )
 46 | }
 47 | 
 48 | function NavigationMenuItem({
 49 |   className,
 50 |   ...props
 51 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
 52 |   return (
 53 |     <NavigationMenuPrimitive.Item
 54 |       data-slot="navigation-menu-item"
 55 |       className={cn("relative", className)}
 56 |       {...props}
 57 |     />
 58 |   )
 59 | }
 60 | 
 61 | const navigationMenuTriggerStyle = cva(
 62 |   "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 63 | )
 64 | 
 65 | function NavigationMenuTrigger({
 66 |   className,
 67 |   children,
 68 |   ...props
 69 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
 70 |   return (
 71 |     <NavigationMenuPrimitive.Trigger
 72 |       data-slot="navigation-menu-trigger"
 73 |       className={cn(navigationMenuTriggerStyle(), "group", className)}
 74 |       {...props}
 75 |     >
 76 |       {children}{" "}
 77 |       <ChevronDownIcon
 78 |         className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
 79 |         aria-hidden="true"
 80 |       />
 81 |     </NavigationMenuPrimitive.Trigger>
 82 |   )
 83 | }
 84 | 
 85 | function NavigationMenuContent({
 86 |   className,
 87 |   ...props
 88 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
 89 |   return (
 90 |     <NavigationMenuPrimitive.Content
 91 |       data-slot="navigation-menu-content"
 92 |       className={cn(
 93 |         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
 94 |         "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
 95 |         className
 96 |       )}
 97 |       {...props}
 98 |     />
 99 |   )
100 | }
101 | 
102 | function NavigationMenuViewport({
103 |   className,
104 |   ...props
105 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
106 |   return (
107 |     <div
108 |       className={cn(
109 |         "absolute top-full left-0 isolate z-50 flex justify-center"
110 |       )}
111 |     >
112 |       <NavigationMenuPrimitive.Viewport
113 |         data-slot="navigation-menu-viewport"
114 |         className={cn(
115 |           "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
116 |           className
117 |         )}
118 |         {...props}
119 |       />
120 |     </div>
121 |   )
122 | }
123 | 
124 | function NavigationMenuLink({
125 |   className,
126 |   ...props
127 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
128 |   return (
129 |     <NavigationMenuPrimitive.Link
130 |       data-slot="navigation-menu-link"
131 |       className={cn(
132 |         "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
133 |         className
134 |       )}
135 |       {...props}
136 |     />
137 |   )
138 | }
139 | 
140 | function NavigationMenuIndicator({
141 |   className,
142 |   ...props
143 | }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
144 |   return (
145 |     <NavigationMenuPrimitive.Indicator
146 |       data-slot="navigation-menu-indicator"
147 |       className={cn(
148 |         "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
149 |         className
150 |       )}
151 |       {...props}
152 |     >
153 |       <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
154 |     </NavigationMenuPrimitive.Indicator>
155 |   )
156 | }
157 | 
158 | export {
159 |   NavigationMenu,
160 |   NavigationMenuList,
161 |   NavigationMenuItem,
162 |   NavigationMenuContent,
163 |   NavigationMenuTrigger,
164 |   NavigationMenuLink,
165 |   NavigationMenuIndicator,
166 |   NavigationMenuViewport,
167 |   navigationMenuTriggerStyle,
168 | }
169 |

--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  5 | import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function ContextMenu({
 10 |   ...props
 11 | }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
 12 |   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
 13 | }
 14 | 
 15 | function ContextMenuTrigger({
 16 |   ...props
 17 | }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
 18 |   return (
 19 |     <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
 20 |   )
 21 | }
 22 | 
 23 | function ContextMenuGroup({
 24 |   ...props
 25 | }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
 26 |   return (
 27 |     <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
 28 |   )
 29 | }
 30 | 
 31 | function ContextMenuPortal({
 32 |   ...props
 33 | }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
 34 |   return (
 35 |     <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
 36 |   )
 37 | }
 38 | 
 39 | function ContextMenuSub({
 40 |   ...props
 41 | }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
 42 |   return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
 43 | }
 44 | 
 45 | function ContextMenuRadioGroup({
 46 |   ...props
 47 | }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
 48 |   return (
 49 |     <ContextMenuPrimitive.RadioGroup
 50 |       data-slot="context-menu-radio-group"
 51 |       {...props}
 52 |     />
 53 |   )
 54 | }
 55 | 
 56 | function ContextMenuSubTrigger({
 57 |   className,
 58 |   inset,
 59 |   children,
 60 |   ...props
 61 | }: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
 62 |   inset?: boolean
 63 | }) {
 64 |   return (
 65 |     <ContextMenuPrimitive.SubTrigger
 66 |       data-slot="context-menu-sub-trigger"
 67 |       data-inset={inset}
 68 |       className={cn(
 69 |         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 70 |         className
 71 |       )}
 72 |       {...props}
 73 |     >
 74 |       {children}
 75 |       <ChevronRightIcon className="ml-auto" />
 76 |     </ContextMenuPrimitive.SubTrigger>
 77 |   )
 78 | }
 79 | 
 80 | function ContextMenuSubContent({
 81 |   className,
 82 |   ...props
 83 | }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
 84 |   return (
 85 |     <ContextMenuPrimitive.SubContent
 86 |       data-slot="context-menu-sub-content"
 87 |       className={cn(
 88 |         "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
 89 |         className
 90 |       )}
 91 |       {...props}
 92 |     />
 93 |   )
 94 | }
 95 | 
 96 | function ContextMenuContent({
 97 |   className,
 98 |   ...props
 99 | }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
100 |   return (
101 |     <ContextMenuPrimitive.Portal>
102 |       <ContextMenuPrimitive.Content
103 |         data-slot="context-menu-content"
104 |         className={cn(
105 |           "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
106 |           className
107 |         )}
108 |         {...props}
109 |       />
110 |     </ContextMenuPrimitive.Portal>
111 |   )
112 | }
113 | 
114 | function ContextMenuItem({
115 |   className,
116 |   inset,
117 |   variant = "default",
118 |   ...props
119 | }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
120 |   inset?: boolean
121 |   variant?: "default" | "destructive"
122 | }) {
123 |   return (
124 |     <ContextMenuPrimitive.Item
125 |       data-slot="context-menu-item"
126 |       data-inset={inset}
127 |       data-variant={variant}
128 |       className={cn(
129 |         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
130 |         className
131 |       )}
132 |       {...props}
133 |     />
134 |   )
135 | }
136 | 
137 | function ContextMenuCheckboxItem({
138 |   className,
139 |   children,
140 |   checked,
141 |   ...props
142 | }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
143 |   return (
144 |     <ContextMenuPrimitive.CheckboxItem
145 |       data-slot="context-menu-checkbox-item"
146 |       className={cn(
147 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
148 |         className
149 |       )}
150 |       checked={checked}
151 |       {...props}
152 |     >
153 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
154 |         <ContextMenuPrimitive.ItemIndicator>
155 |           <CheckIcon className="size-4" />
156 |         </ContextMenuPrimitive.ItemIndicator>
157 |       </span>
158 |       {children}
159 |     </ContextMenuPrimitive.CheckboxItem>
160 |   )
161 | }
162 | 
163 | function ContextMenuRadioItem({
164 |   className,
165 |   children,
166 |   ...props
167 | }: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
168 |   return (
169 |     <ContextMenuPrimitive.RadioItem
170 |       data-slot="context-menu-radio-item"
171 |       className={cn(
172 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
173 |         className
174 |       )}
175 |       {...props}
176 |     >
177 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
178 |         <ContextMenuPrimitive.ItemIndicator>
179 |           <CircleIcon className="size-2 fill-current" />
180 |         </ContextMenuPrimitive.ItemIndicator>
181 |       </span>
182 |       {children}
183 |     </ContextMenuPrimitive.RadioItem>
184 |   )
185 | }
186 | 
187 | function ContextMenuLabel({
188 |   className,
189 |   inset,
190 |   ...props
191 | }: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
192 |   inset?: boolean
193 | }) {
194 |   return (
195 |     <ContextMenuPrimitive.Label
196 |       data-slot="context-menu-label"
197 |       data-inset={inset}
198 |       className={cn(
199 |         "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
200 |         className
201 |       )}
202 |       {...props}
203 |     />
204 |   )
205 | }
206 | 
207 | function ContextMenuSeparator({
208 |   className,
209 |   ...props
210 | }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
211 |   return (
212 |     <ContextMenuPrimitive.Separator
213 |       data-slot="context-menu-separator"
214 |       className={cn("bg-border -mx-1 my-1 h-px", className)}
215 |       {...props}
216 |     />
217 |   )
218 | }
219 | 
220 | function ContextMenuShortcut({
221 |   className,
222 |   ...props
223 | }: React.ComponentProps<"span">) {
224 |   return (
225 |     <span
226 |       data-slot="context-menu-shortcut"
227 |       className={cn(
228 |         "text-muted-foreground ml-auto text-xs tracking-widest",
229 |         className
230 |       )}
231 |       {...props}
232 |     />
233 |   )
234 | }
235 | 
236 | export {
237 |   ContextMenu,
238 |   ContextMenuTrigger,
239 |   ContextMenuContent,
240 |   ContextMenuItem,
241 |   ContextMenuCheckboxItem,
242 |   ContextMenuRadioItem,
243 |   ContextMenuLabel,
244 |   ContextMenuSeparator,
245 |   ContextMenuShortcut,
246 |   ContextMenuGroup,
247 |   ContextMenuPortal,
248 |   ContextMenuSub,
249 |   ContextMenuSubContent,
250 |   ContextMenuSubTrigger,
251 |   ContextMenuRadioGroup,
252 | }
253 |

--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  5 | import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
  6 | 
  7 | import { cn } from "@/lib/utils"
  8 | 
  9 | function DropdownMenu({
 10 |   ...props
 11 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
 12 |   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 13 | }
 14 | 
 15 | function DropdownMenuPortal({
 16 |   ...props
 17 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
 18 |   return (
 19 |     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 20 |   )
 21 | }
 22 | 
 23 | function DropdownMenuTrigger({
 24 |   ...props
 25 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
 26 |   return (
 27 |     <DropdownMenuPrimitive.Trigger
 28 |       data-slot="dropdown-menu-trigger"
 29 |       {...props}
 30 |     />
 31 |   )
 32 | }
 33 | 
 34 | function DropdownMenuContent({
 35 |   className,
 36 |   sideOffset = 4,
 37 |   ...props
 38 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
 39 |   return (
 40 |     <DropdownMenuPrimitive.Portal>
 41 |       <DropdownMenuPrimitive.Content
 42 |         data-slot="dropdown-menu-content"
 43 |         sideOffset={sideOffset}
 44 |         className={cn(
 45 |           "bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
 46 |           className
 47 |         )}
 48 |         {...props}
 49 |       />
 50 |     </DropdownMenuPrimitive.Portal>
 51 |   )
 52 | }
 53 | 
 54 | function DropdownMenuGroup({
 55 |   ...props
 56 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
 57 |   return (
 58 |     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 59 |   )
 60 | }
 61 | 
 62 | function DropdownMenuItem({
 63 |   className,
 64 |   inset,
 65 |   variant = "default",
 66 |   ...props
 67 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
 68 |   inset?: boolean
 69 |   variant?: "default" | "destructive"
 70 | }) {
 71 |   return (
 72 |     <DropdownMenuPrimitive.Item
 73 |       data-slot="dropdown-menu-item"
 74 |       data-inset={inset}
 75 |       data-variant={variant}
 76 |       className={cn(
 77 |         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 78 |         className
 79 |       )}
 80 |       {...props}
 81 |     />
 82 |   )
 83 | }
 84 | 
 85 | function DropdownMenuCheckboxItem({
 86 |   className,
 87 |   children,
 88 |   checked,
 89 |   ...props
 90 | }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
 91 |   return (
 92 |     <DropdownMenuPrimitive.CheckboxItem
 93 |       data-slot="dropdown-menu-checkbox-item"
 94 |       className={cn(
 95 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 96 |         className
 97 |       )}
 98 |       checked={checked}
 99 |       {...props}
100 |     >
101 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
102 |         <DropdownMenuPrimitive.ItemIndicator>
103 |           <CheckIcon className="size-4" />
104 |         </DropdownMenuPrimitive.ItemIndicator>
105 |       </span>
106 |       {children}
107 |     </DropdownMenuPrimitive.CheckboxItem>
108 |   )
109 | }
110 | 
111 | function DropdownMenuRadioGroup({
112 |   ...props
113 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
114 |   return (
115 |     <DropdownMenuPrimitive.RadioGroup
116 |       data-slot="dropdown-menu-radio-group"
117 |       {...props}
118 |     />
119 |   )
120 | }
121 | 
122 | function DropdownMenuRadioItem({
123 |   className,
124 |   children,
125 |   ...props
126 | }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
127 |   return (
128 |     <DropdownMenuPrimitive.RadioItem
129 |       data-slot="dropdown-menu-radio-item"
130 |       className={cn(
131 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
132 |         className
133 |       )}
134 |       {...props}
135 |     >
136 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
137 |         <DropdownMenuPrimitive.ItemIndicator>
138 |           <CircleIcon className="size-2 fill-current" />
139 |         </DropdownMenuPrimitive.ItemIndicator>
140 |       </span>
141 |       {children}
142 |     </DropdownMenuPrimitive.RadioItem>
143 |   )
144 | }
145 | 
146 | function DropdownMenuLabel({
147 |   className,
148 |   inset,
149 |   ...props
150 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
151 |   inset?: boolean
152 | }) {
153 |   return (
154 |     <DropdownMenuPrimitive.Label
155 |       data-slot="dropdown-menu-label"
156 |       data-inset={inset}
157 |       className={cn(
158 |         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
159 |         className
160 |       )}
161 |       {...props}
162 |     />
163 |   )
164 | }
165 | 
166 | function DropdownMenuSeparator({
167 |   className,
168 |   ...props
169 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
170 |   return (
171 |     <DropdownMenuPrimitive.Separator
172 |       data-slot="dropdown-menu-separator"
173 |       className={cn("bg-border -mx-1 my-1 h-px", className)}
174 |       {...props}
175 |     />
176 |   )
177 | }
178 | 
179 | function DropdownMenuShortcut({
180 |   className,
181 |   ...props
182 | }: React.ComponentProps<"span">) {
183 |   return (
184 |     <span
185 |       data-slot="dropdown-menu-shortcut"
186 |       className={cn(
187 |         "text-muted-foreground ml-auto text-xs tracking-widest",
188 |         className
189 |       )}
190 |       {...props}
191 |     />
192 |   )
193 | }
194 | 
195 | function DropdownMenuSub({
196 |   ...props
197 | }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
198 |   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
199 | }
200 | 
201 | function DropdownMenuSubTrigger({
202 |   className,
203 |   inset,
204 |   children,
205 |   ...props
206 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
207 |   inset?: boolean
208 | }) {
209 |   return (
210 |     <DropdownMenuPrimitive.SubTrigger
211 |       data-slot="dropdown-menu-sub-trigger"
212 |       data-inset={inset}
213 |       className={cn(
214 |         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
215 |         className
216 |       )}
217 |       {...props}
218 |     >
219 |       {children}
220 |       <ChevronRightIcon className="ml-auto size-4" />
221 |     </DropdownMenuPrimitive.SubTrigger>
222 |   )
223 | }
224 | 
225 | function DropdownMenuSubContent({
226 |   className,
227 |   ...props
228 | }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
229 |   return (
230 |     <DropdownMenuPrimitive.SubContent
231 |       data-slot="dropdown-menu-sub-content"
232 |       className={cn(
233 |         "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
234 |         className
235 |       )}
236 |       {...props}
237 |     />
238 |   )
239 | }
240 | 
241 | export {
242 |   DropdownMenu,
243 |   DropdownMenuPortal,
244 |   DropdownMenuTrigger,
245 |   DropdownMenuContent,
246 |   DropdownMenuGroup,
247 |   DropdownMenuLabel,
248 |   DropdownMenuItem,
249 |   DropdownMenuCheckboxItem,
250 |   DropdownMenuRadioGroup,
251 |   DropdownMenuRadioItem,
252 |   DropdownMenuSeparator,
253 |   DropdownMenuShortcut,
254 |   DropdownMenuSub,
255 |   DropdownMenuSubTrigger,
256 |   DropdownMenuSubContent,
257 | }
258 |

--------------------------------------------------------------------------------
/src/components/ui/menubar.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as MenubarPrimitive from "@radix-ui/react-menubar"
  3 | import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | function Menubar({
  8 |   className,
  9 |   ...props
 10 | }: React.ComponentProps<typeof MenubarPrimitive.Root>) {
 11 |   return (
 12 |     <MenubarPrimitive.Root
 13 |       data-slot="menubar"
 14 |       className={cn(
 15 |         "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
 16 |         className
 17 |       )}
 18 |       {...props}
 19 |     />
 20 |   )
 21 | }
 22 | 
 23 | function MenubarMenu({
 24 |   ...props
 25 | }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
 26 |   return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
 27 | }
 28 | 
 29 | function MenubarGroup({
 30 |   ...props
 31 | }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
 32 |   return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
 33 | }
 34 | 
 35 | function MenubarPortal({
 36 |   ...props
 37 | }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
 38 |   return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
 39 | }
 40 | 
 41 | function MenubarRadioGroup({
 42 |   ...props
 43 | }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
 44 |   return (
 45 |     <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
 46 |   )
 47 | }
 48 | 
 49 | function MenubarTrigger({
 50 |   className,
 51 |   ...props
 52 | }: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
 53 |   return (
 54 |     <MenubarPrimitive.Trigger
 55 |       data-slot="menubar-trigger"
 56 |       className={cn(
 57 |         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
 58 |         className
 59 |       )}
 60 |       {...props}
 61 |     />
 62 |   )
 63 | }
 64 | 
 65 | function MenubarContent({
 66 |   className,
 67 |   align = "start",
 68 |   alignOffset = -4,
 69 |   sideOffset = 8,
 70 |   ...props
 71 | }: React.ComponentProps<typeof MenubarPrimitive.Content>) {
 72 |   return (
 73 |     <MenubarPortal>
 74 |       <MenubarPrimitive.Content
 75 |         data-slot="menubar-content"
 76 |         align={align}
 77 |         alignOffset={alignOffset}
 78 |         sideOffset={sideOffset}
 79 |         className={cn(
 80 |           "bg-popover text-popover-foreground data-[state=open]:animate-in 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 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
 81 |           className
 82 |         )}
 83 |         {...props}
 84 |       />
 85 |     </MenubarPortal>
 86 |   )
 87 | }
 88 | 
 89 | function MenubarItem({
 90 |   className,
 91 |   inset,
 92 |   variant = "default",
 93 |   ...props
 94 | }: React.ComponentProps<typeof MenubarPrimitive.Item> & {
 95 |   inset?: boolean
 96 |   variant?: "default" | "destructive"
 97 | }) {
 98 |   return (
 99 |     <MenubarPrimitive.Item
100 |       data-slot="menubar-item"
101 |       data-inset={inset}
102 |       data-variant={variant}
103 |       className={cn(
104 |         "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
105 |         className
106 |       )}
107 |       {...props}
108 |     />
109 |   )
110 | }
111 | 
112 | function MenubarCheckboxItem({
113 |   className,
114 |   children,
115 |   checked,
116 |   ...props
117 | }: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
118 |   return (
119 |     <MenubarPrimitive.CheckboxItem
120 |       data-slot="menubar-checkbox-item"
121 |       className={cn(
122 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
123 |         className
124 |       )}
125 |       checked={checked}
126 |       {...props}
127 |     >
128 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
129 |         <MenubarPrimitive.ItemIndicator>
130 |           <CheckIcon className="size-4" />
131 |         </MenubarPrimitive.ItemIndicator>
132 |       </span>
133 |       {children}
134 |     </MenubarPrimitive.CheckboxItem>
135 |   )
136 | }
137 | 
138 | function MenubarRadioItem({
139 |   className,
140 |   children,
141 |   ...props
142 | }: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
143 |   return (
144 |     <MenubarPrimitive.RadioItem
145 |       data-slot="menubar-radio-item"
146 |       className={cn(
147 |         "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
148 |         className
149 |       )}
150 |       {...props}
151 |     >
152 |       <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
153 |         <MenubarPrimitive.ItemIndicator>
154 |           <CircleIcon className="size-2 fill-current" />
155 |         </MenubarPrimitive.ItemIndicator>
156 |       </span>
157 |       {children}
158 |     </MenubarPrimitive.RadioItem>
159 |   )
160 | }
161 | 
162 | function MenubarLabel({
163 |   className,
164 |   inset,
165 |   ...props
166 | }: React.ComponentProps<typeof MenubarPrimitive.Label> & {
167 |   inset?: boolean
168 | }) {
169 |   return (
170 |     <MenubarPrimitive.Label
171 |       data-slot="menubar-label"
172 |       data-inset={inset}
173 |       className={cn(
174 |         "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
175 |         className
176 |       )}
177 |       {...props}
178 |     />
179 |   )
180 | }
181 | 
182 | function MenubarSeparator({
183 |   className,
184 |   ...props
185 | }: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
186 |   return (
187 |     <MenubarPrimitive.Separator
188 |       data-slot="menubar-separator"
189 |       className={cn("bg-border -mx-1 my-1 h-px", className)}
190 |       {...props}
191 |     />
192 |   )
193 | }
194 | 
195 | function MenubarShortcut({
196 |   className,
197 |   ...props
198 | }: React.ComponentProps<"span">) {
199 |   return (
200 |     <span
201 |       data-slot="menubar-shortcut"
202 |       className={cn(
203 |         "text-muted-foreground ml-auto text-xs tracking-widest",
204 |         className
205 |       )}
206 |       {...props}
207 |     />
208 |   )
209 | }
210 | 
211 | function MenubarSub({
212 |   ...props
213 | }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
214 |   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
215 | }
216 | 
217 | function MenubarSubTrigger({
218 |   className,
219 |   inset,
220 |   children,
221 |   ...props
222 | }: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
223 |   inset?: boolean
224 | }) {
225 |   return (
226 |     <MenubarPrimitive.SubTrigger
227 |       data-slot="menubar-sub-trigger"
228 |       data-inset={inset}
229 |       className={cn(
230 |         "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
231 |         className
232 |       )}
233 |       {...props}
234 |     >
235 |       {children}
236 |       <ChevronRightIcon className="ml-auto h-4 w-4" />
237 |     </MenubarPrimitive.SubTrigger>
238 |   )
239 | }
240 | 
241 | function MenubarSubContent({
242 |   className,
243 |   ...props
244 | }: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
245 |   return (
246 |     <MenubarPrimitive.SubContent
247 |       data-slot="menubar-sub-content"
248 |       className={cn(
249 |         "bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
250 |         className
251 |       )}
252 |       {...props}
253 |     />
254 |   )
255 | }
256 | 
257 | export {
258 |   Menubar,
259 |   MenubarPortal,
260 |   MenubarMenu,
261 |   MenubarTrigger,
262 |   MenubarContent,
263 |   MenubarGroup,
264 |   MenubarSeparator,
265 |   MenubarLabel,
266 |   MenubarItem,
267 |   MenubarShortcut,
268 |   MenubarCheckboxItem,
269 |   MenubarRadioGroup,
270 |   MenubarRadioItem,
271 |   MenubarSub,
272 |   MenubarSubTrigger,
273 |   MenubarSubContent,
274 | }
275 |

--------------------------------------------------------------------------------
/src/components/ui/chart.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as RechartsPrimitive from "recharts"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | 
  6 | // Format: { THEME_NAME: CSS_SELECTOR }
  7 | const THEMES = { light: "", dark: ".dark" } as const
  8 | 
  9 | export type ChartConfig = {
 10 |   [k in string]: {
 11 |     label?: React.ReactNode
 12 |     icon?: React.ComponentType
 13 |   } & (
 14 |     | { color?: string; theme?: never }
 15 |     | { color?: never; theme: Record<keyof typeof THEMES, string> }
 16 |   )
 17 | }
 18 | 
 19 | type ChartContextProps = {
 20 |   config: ChartConfig
 21 | }
 22 | 
 23 | const ChartContext = React.createContext<ChartContextProps | null>(null)
 24 | 
 25 | function useChart() {
 26 |   const context = React.useContext(ChartContext)
 27 | 
 28 |   if (!context) {
 29 |     throw new Error("useChart must be used within a <ChartContainer />")
 30 |   }
 31 | 
 32 |   return context
 33 | }
 34 | 
 35 | function ChartContainer({
 36 |   id,
 37 |   className,
 38 |   children,
 39 |   config,
 40 |   ...props
 41 | }: React.ComponentProps<"div"> & {
 42 |   config: ChartConfig
 43 |   children: React.ComponentProps<
 44 |     typeof RechartsPrimitive.ResponsiveContainer
 45 |   >["children"]
 46 | }) {
 47 |   const uniqueId = React.useId()
 48 |   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 49 | 
 50 |   return (
 51 |     <ChartContext.Provider value={{ config }}>
 52 |       <div
 53 |         data-slot="chart"
 54 |         data-chart={chartId}
 55 |         className={cn(
 56 |           "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
 57 |           className
 58 |         )}
 59 |         {...props}
 60 |       >
 61 |         <ChartStyle id={chartId} config={config} />
 62 |         <RechartsPrimitive.ResponsiveContainer>
 63 |           {children}
 64 |         </RechartsPrimitive.ResponsiveContainer>
 65 |       </div>
 66 |     </ChartContext.Provider>
 67 |   )
 68 | }
 69 | 
 70 | const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 71 |   const colorConfig = Object.entries(config).filter(
 72 |     ([, config]) => config.theme || config.color
 73 |   )
 74 | 
 75 |   if (!colorConfig.length) {
 76 |     return null
 77 |   }
 78 | 
 79 |   return (
 80 |     <style
 81 |       dangerouslySetInnerHTML={{
 82 |         __html: Object.entries(THEMES)
 83 |           .map(
 84 |             ([theme, prefix]) => `
 85 | ${prefix} [data-chart=${id}] {
 86 | ${colorConfig
 87 |   .map(([key, itemConfig]) => {
 88 |     const color =
 89 |       itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
 90 |       itemConfig.color
 91 |     return color ? `  --color-${key}: ${color};` : null
 92 |   })
 93 |   .join("\n")}
 94 | }
 95 | `
 96 |           )
 97 |           .join("\n"),
 98 |       }}
 99 |     />
100 |   )
101 | }
102 | 
103 | const ChartTooltip = RechartsPrimitive.Tooltip
104 | 
105 | function ChartTooltipContent({
106 |   active,
107 |   payload,
108 |   className,
109 |   indicator = "dot",
110 |   hideLabel = false,
111 |   hideIndicator = false,
112 |   label,
113 |   labelFormatter,
114 |   labelClassName,
115 |   formatter,
116 |   color,
117 |   nameKey,
118 |   labelKey,
119 | }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
120 |   React.ComponentProps<"div"> & {
121 |     hideLabel?: boolean
122 |     hideIndicator?: boolean
123 |     indicator?: "line" | "dot" | "dashed"
124 |     nameKey?: string
125 |     labelKey?: string
126 |   }) {
127 |   const { config } = useChart()
128 | 
129 |   const tooltipLabel = React.useMemo(() => {
130 |     if (hideLabel || !payload?.length) {
131 |       return null
132 |     }
133 | 
134 |     const [item] = payload
135 |     const key = `${labelKey || item?.dataKey || item?.name || "value"}`
136 |     const itemConfig = getPayloadConfigFromPayload(config, item, key)
137 |     const value =
138 |       !labelKey && typeof label === "string"
139 |         ? config[label as keyof typeof config]?.label || label
140 |         : itemConfig?.label
141 | 
142 |     if (labelFormatter) {
143 |       return (
144 |         <div className={cn("font-medium", labelClassName)}>
145 |           {labelFormatter(value, payload)}
146 |         </div>
147 |       )
148 |     }
149 | 
150 |     if (!value) {
151 |       return null
152 |     }
153 | 
154 |     return <div className={cn("font-medium", labelClassName)}>{value}</div>
155 |   }, [
156 |     label,
157 |     labelFormatter,
158 |     payload,
159 |     hideLabel,
160 |     labelClassName,
161 |     config,
162 |     labelKey,
163 |   ])
164 | 
165 |   if (!active || !payload?.length) {
166 |     return null
167 |   }
168 | 
169 |   const nestLabel = payload.length === 1 && indicator !== "dot"
170 | 
171 |   return (
172 |     <div
173 |       className={cn(
174 |         "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
175 |         className
176 |       )}
177 |     >
178 |       {!nestLabel ? tooltipLabel : null}
179 |       <div className="grid gap-1.5">
180 |         {payload.map((item, index) => {
181 |           const key = `${nameKey || item.name || item.dataKey || "value"}`
182 |           const itemConfig = getPayloadConfigFromPayload(config, item, key)
183 |           const indicatorColor = color || item.payload.fill || item.color
184 | 
185 |           return (
186 |             <div
187 |               key={item.dataKey}
188 |               className={cn(
189 |                 "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
190 |                 indicator === "dot" && "items-center"
191 |               )}
192 |             >
193 |               {formatter && item?.value !== undefined && item.name ? (
194 |                 formatter(item.value, item.name, item, index, item.payload)
195 |               ) : (
196 |                 <>
197 |                   {itemConfig?.icon ? (
198 |                     <itemConfig.icon />
199 |                   ) : (
200 |                     !hideIndicator && (
201 |                       <div
202 |                         className={cn(
203 |                           "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
204 |                           {
205 |                             "h-2.5 w-2.5": indicator === "dot",
206 |                             "w-1": indicator === "line",
207 |                             "w-0 border-[1.5px] border-dashed bg-transparent":
208 |                               indicator === "dashed",
209 |                             "my-0.5": nestLabel && indicator === "dashed",
210 |                           }
211 |                         )}
212 |                         style={
213 |                           {
214 |                             "--color-bg": indicatorColor,
215 |                             "--color-border": indicatorColor,
216 |                           } as React.CSSProperties
217 |                         }
218 |                       />
219 |                     )
220 |                   )}
221 |                   <div
222 |                     className={cn(
223 |                       "flex flex-1 justify-between leading-none",
224 |                       nestLabel ? "items-end" : "items-center"
225 |                     )}
226 |                   >
227 |                     <div className="grid gap-1.5">
228 |                       {nestLabel ? tooltipLabel : null}
229 |                       <span className="text-muted-foreground">
230 |                         {itemConfig?.label || item.name}
231 |                       </span>
232 |                     </div>
233 |                     {item.value && (
234 |                       <span className="text-foreground font-mono font-medium tabular-nums">
235 |                         {item.value.toLocaleString()}
236 |                       </span>
237 |                     )}
238 |                   </div>
239 |                 </>
240 |               )}
241 |             </div>
242 |           )
243 |         })}
244 |       </div>
245 |     </div>
246 |   )
247 | }
248 | 
249 | const ChartLegend = RechartsPrimitive.Legend
250 | 
251 | function ChartLegendContent({
252 |   className,
253 |   hideIcon = false,
254 |   payload,
255 |   verticalAlign = "bottom",
256 |   nameKey,
257 | }: React.ComponentProps<"div"> &
258 |   Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
259 |     hideIcon?: boolean
260 |     nameKey?: string
261 |   }) {
262 |   const { config } = useChart()
263 | 
264 |   if (!payload?.length) {
265 |     return null
266 |   }
267 | 
268 |   return (
269 |     <div
270 |       className={cn(
271 |         "flex items-center justify-center gap-4",
272 |         verticalAlign === "top" ? "pb-3" : "pt-3",
273 |         className
274 |       )}
275 |     >
276 |       {payload.map((item) => {
277 |         const key = `${nameKey || item.dataKey || "value"}`
278 |         const itemConfig = getPayloadConfigFromPayload(config, item, key)
279 | 
280 |         return (
281 |           <div
282 |             key={item.value}
283 |             className={cn(
284 |               "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
285 |             )}
286 |           >
287 |             {itemConfig?.icon && !hideIcon ? (
288 |               <itemConfig.icon />
289 |             ) : (
290 |               <div
291 |                 className="h-2 w-2 shrink-0 rounded-[2px]"
292 |                 style={{
293 |                   backgroundColor: item.color,
294 |                 }}
295 |               />
296 |             )}
297 |             {itemConfig?.label}
298 |           </div>
299 |         )
300 |       })}
301 |     </div>
302 |   )
303 | }
304 | 
305 | // Helper to extract item config from a payload.
306 | function getPayloadConfigFromPayload(
307 |   config: ChartConfig,
308 |   payload: unknown,
309 |   key: string
310 | ) {
311 |   if (typeof payload !== "object" || payload === null) {
312 |     return undefined
313 |   }
314 | 
315 |   const payloadPayload =
316 |     "payload" in payload &&
317 |     typeof payload.payload === "object" &&
318 |     payload.payload !== null
319 |       ? payload.payload
320 |       : undefined
321 | 
322 |   let configLabelKey: string = key
323 | 
324 |   if (
325 |     key in payload &&
326 |     typeof payload[key as keyof typeof payload] === "string"
327 |   ) {
328 |     configLabelKey = payload[key as keyof typeof payload] as string
329 |   } else if (
330 |     payloadPayload &&
331 |     key in payloadPayload &&
332 |     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
333 |   ) {
334 |     configLabelKey = payloadPayload[
335 |       key as keyof typeof payloadPayload
336 |     ] as string
337 |   }
338 | 
339 |   return configLabelKey in config
340 |     ? config[configLabelKey]
341 |     : config[key as keyof typeof config]
342 | }
343 | 
344 | export {
345 |   ChartContainer,
346 |   ChartTooltip,
347 |   ChartTooltipContent,
348 |   ChartLegend,
349 |   ChartLegendContent,
350 |   ChartStyle,
351 | }
352 |

--------------------------------------------------------------------------------
/src/components/ui/sidebar.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import { Slot } from "@radix-ui/react-slot"
  5 | import { VariantProps, cva } from "class-variance-authority"
  6 | import { PanelLeftIcon } from "lucide-react"
  7 | 
  8 | import { useIsMobile } from "@/hooks/use-mobile"
  9 | import { cn } from "@/lib/utils"
 10 | import { Button } from "@/components/ui/button"
 11 | import { Input } from "@/components/ui/input"
 12 | import { Separator } from "@/components/ui/separator"
 13 | import {
 14 |   Sheet,
 15 |   SheetContent,
 16 |   SheetDescription,
 17 |   SheetHeader,
 18 |   SheetTitle,
 19 | } from "@/components/ui/sheet"
 20 | import { Skeleton } from "@/components/ui/skeleton"
 21 | import {
 22 |   Tooltip,
 23 |   TooltipContent,
 24 |   TooltipProvider,
 25 |   TooltipTrigger,
 26 | } from "@/components/ui/tooltip"
 27 | 
 28 | const SIDEBAR_COOKIE_NAME = "sidebar_state"
 29 | const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
 30 | const SIDEBAR_WIDTH = "16rem"
 31 | const SIDEBAR_WIDTH_MOBILE = "18rem"
 32 | const SIDEBAR_WIDTH_ICON = "3rem"
 33 | const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 34 | 
 35 | type SidebarContextProps = {
 36 |   state: "expanded" | "collapsed"
 37 |   open: boolean
 38 |   setOpen: (open: boolean) => void
 39 |   openMobile: boolean
 40 |   setOpenMobile: (open: boolean) => void
 41 |   isMobile: boolean
 42 |   toggleSidebar: () => void
 43 | }
 44 | 
 45 | const SidebarContext = React.createContext<SidebarContextProps | null>(null)
 46 | 
 47 | function useSidebar() {
 48 |   const context = React.useContext(SidebarContext)
 49 |   if (!context) {
 50 |     throw new Error("useSidebar must be used within a SidebarProvider.")
 51 |   }
 52 | 
 53 |   return context
 54 | }
 55 | 
 56 | function SidebarProvider({
 57 |   defaultOpen = true,
 58 |   open: openProp,
 59 |   onOpenChange: setOpenProp,
 60 |   className,
 61 |   style,
 62 |   children,
 63 |   ...props
 64 | }: React.ComponentProps<"div"> & {
 65 |   defaultOpen?: boolean
 66 |   open?: boolean
 67 |   onOpenChange?: (open: boolean) => void
 68 | }) {
 69 |   const isMobile = useIsMobile()
 70 |   const [openMobile, setOpenMobile] = React.useState(false)
 71 | 
 72 |   // This is the internal state of the sidebar.
 73 |   // We use openProp and setOpenProp for control from outside the component.
 74 |   const [_open, _setOpen] = React.useState(defaultOpen)
 75 |   const open = openProp ?? _open
 76 |   const setOpen = React.useCallback(
 77 |     (value: boolean | ((value: boolean) => boolean)) => {
 78 |       const openState = typeof value === "function" ? value(open) : value
 79 |       if (setOpenProp) {
 80 |         setOpenProp(openState)
 81 |       } else {
 82 |         _setOpen(openState)
 83 |       }
 84 | 
 85 |       // This sets the cookie to keep the sidebar state.
 86 |       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
 87 |     },
 88 |     [setOpenProp, open]
 89 |   )
 90 | 
 91 |   // Helper to toggle the sidebar.
 92 |   const toggleSidebar = React.useCallback(() => {
 93 |     return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
 94 |   }, [isMobile, setOpen, setOpenMobile])
 95 | 
 96 |   // Adds a keyboard shortcut to toggle the sidebar.
 97 |   React.useEffect(() => {
 98 |     const handleKeyDown = (event: KeyboardEvent) => {
 99 |       if (
100 |         event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
101 |         (event.metaKey || event.ctrlKey)
102 |       ) {
103 |         event.preventDefault()
104 |         toggleSidebar()
105 |       }
106 |     }
107 | 
108 |     window.addEventListener("keydown", handleKeyDown)
109 |     return () => window.removeEventListener("keydown", handleKeyDown)
110 |   }, [toggleSidebar])
111 | 
112 |   // We add a state so that we can do data-state="expanded" or "collapsed".
113 |   // This makes it easier to style the sidebar with Tailwind classes.
114 |   const state = open ? "expanded" : "collapsed"
115 | 
116 |   const contextValue = React.useMemo<SidebarContextProps>(
117 |     () => ({
118 |       state,
119 |       open,
120 |       setOpen,
121 |       isMobile,
122 |       openMobile,
123 |       setOpenMobile,
124 |       toggleSidebar,
125 |     }),
126 |     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
127 |   )
128 | 
129 |   return (
130 |     <SidebarContext.Provider value={contextValue}>
131 |       <TooltipProvider delayDuration={0}>
132 |         <div
133 |           data-slot="sidebar-wrapper"
134 |           style={
135 |             {
136 |               "--sidebar-width": SIDEBAR_WIDTH,
137 |               "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
138 |               ...style,
139 |             } as React.CSSProperties
140 |           }
141 |           className={cn(
142 |             "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
143 |             className
144 |           )}
145 |           {...props}
146 |         >
147 |           {children}
148 |         </div>
149 |       </TooltipProvider>
150 |     </SidebarContext.Provider>
151 |   )
152 | }
153 | 
154 | function Sidebar({
155 |   side = "left",
156 |   variant = "sidebar",
157 |   collapsible = "offcanvas",
158 |   className,
159 |   children,
160 |   ...props
161 | }: React.ComponentProps<"div"> & {
162 |   side?: "left" | "right"
163 |   variant?: "sidebar" | "floating" | "inset"
164 |   collapsible?: "offcanvas" | "icon" | "none"
165 | }) {
166 |   const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
167 | 
168 |   if (collapsible === "none") {
169 |     return (
170 |       <div
171 |         data-slot="sidebar"
172 |         className={cn(
173 |           "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
174 |           className
175 |         )}
176 |         {...props}
177 |       >
178 |         {children}
179 |       </div>
180 |     )
181 |   }
182 | 
183 |   if (isMobile) {
184 |     return (
185 |       <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
186 |         <SheetContent
187 |           data-sidebar="sidebar"
188 |           data-slot="sidebar"
189 |           data-mobile="true"
190 |           className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
191 |           style={
192 |             {
193 |               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
194 |             } as React.CSSProperties
195 |           }
196 |           side={side}
197 |         >
198 |           <SheetHeader className="sr-only">
199 |             <SheetTitle>Sidebar</SheetTitle>
200 |             <SheetDescription>Displays the mobile sidebar.</SheetDescription>
201 |           </SheetHeader>
202 |           <div className="flex h-full w-full flex-col">{children}</div>
203 |         </SheetContent>
204 |       </Sheet>
205 |     )
206 |   }
207 | 
208 |   return (
209 |     <div
210 |       className="group peer text-sidebar-foreground hidden md:block"
211 |       data-state={state}
212 |       data-collapsible={state === "collapsed" ? collapsible : ""}
213 |       data-variant={variant}
214 |       data-side={side}
215 |       data-slot="sidebar"
216 |     >
217 |       {/* This is what handles the sidebar gap on desktop */}
218 |       <div
219 |         data-slot="sidebar-gap"
220 |         className={cn(
221 |           "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
222 |           "group-data-[collapsible=offcanvas]:w-0",
223 |           "group-data-[side=right]:rotate-180",
224 |           variant === "floating" || variant === "inset"
225 |             ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
226 |             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
227 |         )}
228 |       />
229 |       <div
230 |         data-slot="sidebar-container"
231 |         className={cn(
232 |           "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
233 |           side === "left"
234 |             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
235 |             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
236 |           // Adjust the padding for floating and inset variants.
237 |           variant === "floating" || variant === "inset"
238 |             ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
239 |             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
240 |           className
241 |         )}
242 |         {...props}
243 |       >
244 |         <div
245 |           data-sidebar="sidebar"
246 |           data-slot="sidebar-inner"
247 |           className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
248 |         >
249 |           {children}
250 |         </div>
251 |       </div>
252 |     </div>
253 |   )
254 | }
255 | 
256 | function SidebarTrigger({
257 |   className,
258 |   onClick,
259 |   ...props
260 | }: React.ComponentProps<typeof Button>) {
261 |   const { toggleSidebar } = useSidebar()
262 | 
263 |   return (
264 |     <Button
265 |       data-sidebar="trigger"
266 |       data-slot="sidebar-trigger"
267 |       variant="ghost"
268 |       size="icon"
269 |       className={cn("size-7", className)}
270 |       onClick={(event) => {
271 |         onClick?.(event)
272 |         toggleSidebar()
273 |       }}
274 |       {...props}
275 |     >
276 |       <PanelLeftIcon />
277 |       <span className="sr-only">Toggle Sidebar</span>
278 |     </Button>
279 |   )
280 | }
281 | 
282 | function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
283 |   const { toggleSidebar } = useSidebar()
284 | 
285 |   return (
286 |     <button
287 |       data-sidebar="rail"
288 |       data-slot="sidebar-rail"
289 |       aria-label="Toggle Sidebar"
290 |       tabIndex={-1}
291 |       onClick={toggleSidebar}
292 |       title="Toggle Sidebar"
293 |       className={cn(
294 |         "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
295 |         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
296 |         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
297 |         "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
298 |         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
299 |         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
300 |         className
301 |       )}
302 |       {...props}
303 |     />
304 |   )
305 | }
306 | 
307 | function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
308 |   return (
309 |     <main
310 |       data-slot="sidebar-inset"
311 |       className={cn(
312 |         "bg-background relative flex w-full flex-1 flex-col",
313 |         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
314 |         className
315 |       )}
316 |       {...props}
317 |     />
318 |   )
319 | }
320 | 
321 | function SidebarInput({
322 |   className,
323 |   ...props
324 | }: React.ComponentProps<typeof Input>) {
325 |   return (
326 |     <Input
327 |       data-slot="sidebar-input"
328 |       data-sidebar="input"
329 |       className={cn("bg-background h-8 w-full shadow-none", className)}
330 |       {...props}
331 |     />
332 |   )
333 | }
334 | 
335 | function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
336 |   return (
337 |     <div
338 |       data-slot="sidebar-header"
339 |       data-sidebar="header"
340 |       className={cn("flex flex-col gap-2 p-2", className)}
341 |       {...props}
342 |     />
343 |   )
344 | }
345 | 
346 | function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
347 |   return (
348 |     <div
349 |       data-slot="sidebar-footer"
350 |       data-sidebar="footer"
351 |       className={cn("flex flex-col gap-2 p-2", className)}
352 |       {...props}
353 |     />
354 |   )
355 | }
356 | 
357 | function SidebarSeparator({
358 |   className,
359 |   ...props
360 | }: React.ComponentProps<typeof Separator>) {
361 |   return (
362 |     <Separator
363 |       data-slot="sidebar-separator"
364 |       data-sidebar="separator"
365 |       className={cn("bg-sidebar-border mx-2 w-auto", className)}
366 |       {...props}
367 |     />
368 |   )
369 | }
370 | 
371 | function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
372 |   return (
373 |     <div
374 |       data-slot="sidebar-content"
375 |       data-sidebar="content"
376 |       className={cn(
377 |         "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
378 |         className
379 |       )}
380 |       {...props}
381 |     />
382 |   )
383 | }
384 | 
385 | function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
386 |   return (
387 |     <div
388 |       data-slot="sidebar-group"
389 |       data-sidebar="group"
390 |       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
391 |       {...props}
392 |     />
393 |   )
394 | }
395 | 
396 | function SidebarGroupLabel({
397 |   className,
398 |   asChild = false,
399 |   ...props
400 | }: React.ComponentProps<"div"> & { asChild?: boolean }) {
401 |   const Comp = asChild ? Slot : "div"
402 | 
403 |   return (
404 |     <Comp
405 |       data-slot="sidebar-group-label"
406 |       data-sidebar="group-label"
407 |       className={cn(
408 |         "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
409 |         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
410 |         className
411 |       )}
412 |       {...props}
413 |     />
414 |   )
415 | }
416 | 
417 | function SidebarGroupAction({
418 |   className,
419 |   asChild = false,
420 |   ...props
421 | }: React.ComponentProps<"button"> & { asChild?: boolean }) {
422 |   const Comp = asChild ? Slot : "button"
423 | 
424 |   return (
425 |     <Comp
426 |       data-slot="sidebar-group-action"
427 |       data-sidebar="group-action"
428 |       className={cn(
429 |         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
430 |         // Increases the hit area of the button on mobile.
431 |         "after:absolute after:-inset-2 md:after:hidden",
432 |         "group-data-[collapsible=icon]:hidden",
433 |         className
434 |       )}
435 |       {...props}
436 |     />
437 |   )
438 | }
439 | 
440 | function SidebarGroupContent({
441 |   className,
442 |   ...props
443 | }: React.ComponentProps<"div">) {
444 |   return (
445 |     <div
446 |       data-slot="sidebar-group-content"
447 |       data-sidebar="group-content"
448 |       className={cn("w-full text-sm", className)}
449 |       {...props}
450 |     />
451 |   )
452 | }
453 | 
454 | function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
455 |   return (
456 |     <ul
457 |       data-slot="sidebar-menu"
458 |       data-sidebar="menu"
459 |       className={cn("flex w-full min-w-0 flex-col gap-1", className)}
460 |       {...props}
461 |     />
462 |   )
463 | }
464 | 
465 | function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
466 |   return (
467 |     <li
468 |       data-slot="sidebar-menu-item"
469 |       data-sidebar="menu-item"
470 |       className={cn("group/menu-item relative", className)}
471 |       {...props}
472 |     />
473 |   )
474 | }
475 | 
476 | const sidebarMenuButtonVariants = cva(
477 |   "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
478 |   {
479 |     variants: {
480 |       variant: {
481 |         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
482 |         outline:
483 |           "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
484 |       },
485 |       size: {
486 |         default: "h-8 text-sm",
487 |         sm: "h-7 text-xs",
488 |         lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
489 |       },
490 |     },
491 |     defaultVariants: {
492 |       variant: "default",
493 |       size: "default",
494 |     },
495 |   }
496 | )
497 | 
498 | function SidebarMenuButton({
499 |   asChild = false,
500 |   isActive = false,
501 |   variant = "default",
502 |   size = "default",
503 |   tooltip,
504 |   className,
505 |   ...props
506 | }: React.ComponentProps<"button"> & {
507 |   asChild?: boolean
508 |   isActive?: boolean
509 |   tooltip?: string | React.ComponentProps<typeof TooltipContent>
510 | } & VariantProps<typeof sidebarMenuButtonVariants>) {
511 |   const Comp = asChild ? Slot : "button"
512 |   const { isMobile, state } = useSidebar()
513 | 
514 |   const button = (
515 |     <Comp
516 |       data-slot="sidebar-menu-button"
517 |       data-sidebar="menu-button"
518 |       data-size={size}
519 |       data-active={isActive}
520 |       className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
521 |       {...props}
522 |     />
523 |   )
524 | 
525 |   if (!tooltip) {
526 |     return button
527 |   }
528 | 
529 |   if (typeof tooltip === "string") {
530 |     tooltip = {
531 |       children: tooltip,
532 |     }
533 |   }
534 | 
535 |   return (
536 |     <Tooltip>
537 |       <TooltipTrigger asChild>{button}</TooltipTrigger>
538 |       <TooltipContent
539 |         side="right"
540 |         align="center"
541 |         hidden={state !== "collapsed" || isMobile}
542 |         {...tooltip}
543 |       />
544 |     </Tooltip>
545 |   )
546 | }
547 | 
548 | function SidebarMenuAction({
549 |   className,
550 |   asChild = false,
551 |   showOnHover = false,
552 |   ...props
553 | }: React.ComponentProps<"button"> & {
554 |   asChild?: boolean
555 |   showOnHover?: boolean
556 | }) {
557 |   const Comp = asChild ? Slot : "button"
558 | 
559 |   return (
560 |     <Comp
561 |       data-slot="sidebar-menu-action"
562 |       data-sidebar="menu-action"
563 |       className={cn(
564 |         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
565 |         // Increases the hit area of the button on mobile.
566 |         "after:absolute after:-inset-2 md:after:hidden",
567 |         "peer-data-[size=sm]/menu-button:top-1",
568 |         "peer-data-[size=default]/menu-button:top-1.5",
569 |         "peer-data-[size=lg]/menu-button:top-2.5",
570 |         "group-data-[collapsible=icon]:hidden",
571 |         showOnHover &&
572 |           "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
573 |         className
574 |       )}
575 |       {...props}
576 |     />
577 |   )
578 | }
579 | 
580 | function SidebarMenuBadge({
581 |   className,
582 |   ...props
583 | }: React.ComponentProps<"div">) {
584 |   return (
585 |     <div
586 |       data-slot="sidebar-menu-badge"
587 |       data-sidebar="menu-badge"
588 |       className={cn(
589 |         "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
590 |         "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
591 |         "peer-data-[size=sm]/menu-button:top-1",
592 |         "peer-data-[size=default]/menu-button:top-1.5",
593 |         "peer-data-[size=lg]/menu-button:top-2.5",
594 |         "group-data-[collapsible=icon]:hidden",
595 |         className
596 |       )}
597 |       {...props}
598 |     />
599 |   )
600 | }
601 | 
602 | function SidebarMenuSkeleton({
603 |   className,
604 |   showIcon = false,
605 |   ...props
606 | }: React.ComponentProps<"div"> & {
607 |   showIcon?: boolean
608 | }) {
609 |   // Random width between 50 to 90%.
610 |   const width = React.useMemo(() => {
611 |     return `${Math.floor(Math.random() * 40) + 50}%`
612 |   }, [])
613 | 
614 |   return (
615 |     <div
616 |       data-slot="sidebar-menu-skeleton"
617 |       data-sidebar="menu-skeleton"
618 |       className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
619 |       {...props}
620 |     >
621 |       {showIcon && (
622 |         <Skeleton
623 |           className="size-4 rounded-md"
624 |           data-sidebar="menu-skeleton-icon"
625 |         />
626 |       )}
627 |       <Skeleton
628 |         className="h-4 max-w-(--skeleton-width) flex-1"
629 |         data-sidebar="menu-skeleton-text"
630 |         style={
631 |           {
632 |             "--skeleton-width": width,
633 |           } as React.CSSProperties
634 |         }
635 |       />
636 |     </div>
637 |   )
638 | }
639 | 
640 | function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
641 |   return (
642 |     <ul
643 |       data-slot="sidebar-menu-sub"
644 |       data-sidebar="menu-sub"
645 |       className={cn(
646 |         "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
647 |         "group-data-[collapsible=icon]:hidden",
648 |         className
649 |       )}
650 |       {...props}
651 |     />
652 |   )
653 | }
654 | 
655 | function SidebarMenuSubItem({
656 |   className,
657 |   ...props
658 | }: React.ComponentProps<"li">) {
659 |   return (
660 |     <li
661 |       data-slot="sidebar-menu-sub-item"
662 |       data-sidebar="menu-sub-item"
663 |       className={cn("group/menu-sub-item relative", className)}
664 |       {...props}
665 |     />
666 |   )
667 | }
668 | 
669 | function SidebarMenuSubButton({
670 |   asChild = false,
671 |   size = "md",
672 |   isActive = false,
673 |   className,
674 |   ...props
675 | }: React.ComponentProps<"a"> & {
676 |   asChild?: boolean
677 |   size?: "sm" | "md"
678 |   isActive?: boolean
679 | }) {
680 |   const Comp = asChild ? Slot : "a"
681 | 
682 |   return (
683 |     <Comp
684 |       data-slot="sidebar-menu-sub-button"
685 |       data-sidebar="menu-sub-button"
686 |       data-size={size}
687 |       data-active={isActive}
688 |       className={cn(
689 |         "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
690 |         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
691 |         size === "sm" && "text-xs",
692 |         size === "md" && "text-sm",
693 |         "group-data-[collapsible=icon]:hidden",
694 |         className
695 |       )}
696 |       {...props}
697 |     />
698 |   )
699 | }
700 | 
701 | export {
702 |   Sidebar,
703 |   SidebarContent,
704 |   SidebarFooter,
705 |   SidebarGroup,
706 |   SidebarGroupAction,
707 |   SidebarGroupContent,
708 |   SidebarGroupLabel,
709 |   SidebarHeader,
710 |   SidebarInput,
711 |   SidebarInset,
712 |   SidebarMenu,
713 |   SidebarMenuAction,
714 |   SidebarMenuBadge,
715 |   SidebarMenuButton,
716 |   SidebarMenuItem,
717 |   SidebarMenuSkeleton,
718 |   SidebarMenuSub,
719 |   SidebarMenuSubButton,
720 |   SidebarMenuSubItem,
721 |   SidebarProvider,
722 |   SidebarRail,
723 |   SidebarSeparator,
724 |   SidebarTrigger,
725 |   useSidebar,
726 | }
727 |

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