@21st-dev/magic
Version:
Magic MCP UI builder by 21st.dev
1 lines • 195 kB
JavaScript
(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[974],{4239:(e,n,t)=>{Promise.resolve().then(t.bind(t,1203))},1271:(e,n,t)=>{"use strict";t.d(n,{$:()=>c});var a=t(5155),r=t(1290),o=t(1027),i=t(2115),s=t(9602);let l=(0,o.F)("inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 disabled:opacity-50 disabled:pointer-events-none disabled:border-primary/75 disabled:shadow-[inset_0_0.5px_0.5px_rgba(255,255,255,0.15)] [&_svg]:pointer-events-none [&_svg]:shrink-0",{variants:{variant:{default:"relative cursor-pointer space-x-2 font-regular ease-out duration-200 outline-0 focus-visible:outline-4 focus-visible:outline-offset-1 border bg-gradient-to-b from-[hsl(var(--primary-gradient-start))] to-[hsl(var(--primary-gradient-end))] hover:opacity-90 text-primary-foreground border-[hsl(var(--primary-gradient-start))] focus-visible:outline-[hsl(var(--primary-gradient-start))] data-[state=open]:opacity-90 data-[state=open]:outline-[hsl(var(--primary-gradient-start))]",destructive:"bg-destructive text-destructive-foreground shadow-sm shadow-black/5 hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm shadow-black/5 hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm shadow-black/5 hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{sm:"h-8 rounded-lg px-3",default:"h-8 rounded-lg px-3",lg:"h-10 rounded-lg px-8",icon:"h-8 w-8"}},defaultVariants:{variant:"default",size:"default"}}),c=i.forwardRef((e,n)=>{let{className:t,variant:o,size:i,asChild:c=!1,...d}=e,m=c?r.DX:"button";return(0,a.jsx)(m,{className:(0,s.cn)(l({variant:o,size:i,className:t})),ref:n,...d})});c.displayName="Button"},1203:(e,n,t)=>{"use strict";t.d(n,{default:()=>E});var a=t(5155),r=t(2115),o=t(1271),i=t(9602);let s=r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:(0,i.cn)("rounded-lg border bg-card text-card-foreground shadow-sm",t),...r})});s.displayName="Card",r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:(0,i.cn)("flex flex-col space-y-1.5 p-6",t),...r})}).displayName="CardHeader",r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:(0,i.cn)("text-2xl font-semibold leading-none tracking-tight",t),...r})}).displayName="CardTitle",r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:(0,i.cn)("text-sm text-muted-foreground",t),...r})}).displayName="CardDescription";let l=r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:(0,i.cn)("p-6 pt-0",t),...r})});l.displayName="CardContent",r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:(0,i.cn)("flex items-center p-6 pt-0",t),...r})}).displayName="CardFooter";var c=t(314),d=t(4504);let m=JSON.parse('{"accordion":"\\"use client\\";\\n\\nimport * as React from \\"react\\";\\nimport * as AccordionPrimitive from \\"@radix-ui/react-accordion\\";\\nimport { ChevronDown } from \\"lucide-react\\";\\n\\nimport { cn } from \\"@/lib/utils\\";\\n\\nconst Accordion = AccordionPrimitive.Root;\\n\\nconst AccordionItem = React.forwardRef<\\n React.ElementRef<typeof AccordionPrimitive.Item>,\\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\\n>(({ className, ...props }, ref) => (\\n <AccordionPrimitive.Item\\n ref={ref}\\n className={cn(\\"border-b\\", className)}\\n {...props}\\n />\\n));\\nAccordionItem.displayName = \\"AccordionItem\\";\\n\\nconst AccordionTrigger = React.forwardRef<\\n React.ElementRef<typeof AccordionPrimitive.Trigger>,\\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\\n>(({ className, children, ...props }, ref) => (\\n <AccordionPrimitive.Header className=\\"flex\\">\\n <AccordionPrimitive.Trigger\\n ref={ref}\\n className={cn(\\n \\"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\\",\\n className\\n )}\\n {...props}\\n >\\n {children}\\n <ChevronDown className=\\"h-4 w-4 shrink-0 transition-transform duration-200\\" />\\n </AccordionPrimitive.Trigger>\\n </AccordionPrimitive.Header>\\n));\\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\\n\\nconst AccordionContent = React.forwardRef<\\n React.ElementRef<typeof AccordionPrimitive.Content>,\\n React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\\n>(({ className, children, ...props }, ref) => (\\n <AccordionPrimitive.Content\\n ref={ref}\\n className=\\"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\\"\\n {...props}\\n >\\n <div className={cn(\\"pb-4 pt-0\\", className)}>{children}</div>\\n </AccordionPrimitive.Content>\\n));\\n\\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\\n\\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent };\\n","alert-dialog":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport * as AlertDialogPrimitive from \\"@radix-ui/react-alert-dialog\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\nimport { buttonVariants } from \\"@/components/ui/button\\"\\n\\nconst AlertDialog = AlertDialogPrimitive.Root\\n\\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\\n\\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\\n\\nconst AlertDialogOverlay = React.forwardRef<\\n React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\\n>(({ className, ...props }, ref) => (\\n <AlertDialogPrimitive.Overlay\\n className={cn(\\n \\"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\\",\\n className\\n )}\\n {...props}\\n ref={ref}\\n />\\n))\\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\\n\\nconst AlertDialogContent = React.forwardRef<\\n React.ElementRef<typeof AlertDialogPrimitive.Content>,\\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\\n>(({ className, ...props }, ref) => (\\n <AlertDialogPortal>\\n <AlertDialogOverlay />\\n <AlertDialogPrimitive.Content\\n ref={ref}\\n className={cn(\\n \\"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg\\",\\n className\\n )}\\n {...props}\\n />\\n </AlertDialogPortal>\\n))\\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\\n\\nconst AlertDialogHeader = ({\\n className,\\n ...props\\n}: React.HTMLAttributes<HTMLDivElement>) => (\\n <div\\n className={cn(\\n \\"flex flex-col space-y-2 text-center sm:text-left\\",\\n className\\n )}\\n {...props}\\n />\\n)\\nAlertDialogHeader.displayName = \\"AlertDialogHeader\\"\\n\\nconst AlertDialogFooter = ({\\n className,\\n ...props\\n}: React.HTMLAttributes<HTMLDivElement>) => (\\n <div\\n className={cn(\\n \\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\\",\\n className\\n )}\\n {...props}\\n />\\n)\\nAlertDialogFooter.displayName = \\"AlertDialogFooter\\"\\n\\nconst AlertDialogTitle = React.forwardRef<\\n React.ElementRef<typeof AlertDialogPrimitive.Title>,\\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\\n>(({ className, ...props }, ref) => (\\n <AlertDialogPrimitive.Title\\n ref={ref}\\n className={cn(\\"text-lg font-semibold\\", className)}\\n {...props}\\n />\\n))\\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\\n\\nconst AlertDialogDescription = React.forwardRef<\\n React.ElementRef<typeof AlertDialogPrimitive.Description>,\\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\\n>(({ className, ...props }, ref) => (\\n <AlertDialogPrimitive.Description\\n ref={ref}\\n className={cn(\\"text-sm text-muted-foreground\\", className)}\\n {...props}\\n />\\n))\\nAlertDialogDescription.displayName =\\n AlertDialogPrimitive.Description.displayName\\n\\nconst AlertDialogAction = React.forwardRef<\\n React.ElementRef<typeof AlertDialogPrimitive.Action>,\\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\\n>(({ className, ...props }, ref) => (\\n <AlertDialogPrimitive.Action\\n ref={ref}\\n className={cn(buttonVariants(), className)}\\n {...props}\\n />\\n))\\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\\n\\nconst AlertDialogCancel = React.forwardRef<\\n React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\\n React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\\n>(({ className, ...props }, ref) => (\\n <AlertDialogPrimitive.Cancel\\n ref={ref}\\n className={cn(\\n buttonVariants({ variant: \\"outline\\" }),\\n \\"mt-2 sm:mt-0\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\\n\\nexport {\\n AlertDialog,\\n AlertDialogPortal,\\n AlertDialogOverlay,\\n AlertDialogTrigger,\\n AlertDialogContent,\\n AlertDialogHeader,\\n AlertDialogFooter,\\n AlertDialogTitle,\\n AlertDialogDescription,\\n AlertDialogAction,\\n AlertDialogCancel,\\n}\\n","alert":"import * as React from \\"react\\"\\nimport { cva, type VariantProps } from \\"class-variance-authority\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst alertVariants = cva(\\n \\"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground\\",\\n {\\n variants: {\\n variant: {\\n default: \\"bg-background text-foreground\\",\\n destructive:\\n \\"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\\",\\n },\\n },\\n defaultVariants: {\\n variant: \\"default\\",\\n },\\n }\\n)\\n\\nconst Alert = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\\n>(({ className, variant, ...props }, ref) => (\\n <div\\n ref={ref}\\n role=\\"alert\\"\\n className={cn(alertVariants({ variant }), className)}\\n {...props}\\n />\\n))\\nAlert.displayName = \\"Alert\\"\\n\\nconst AlertTitle = React.forwardRef<\\n HTMLParagraphElement,\\n React.HTMLAttributes<HTMLHeadingElement>\\n>(({ className, ...props }, ref) => (\\n <h5\\n ref={ref}\\n className={cn(\\"mb-1 font-medium leading-none tracking-tight\\", className)}\\n {...props}\\n />\\n))\\nAlertTitle.displayName = \\"AlertTitle\\"\\n\\nconst AlertDescription = React.forwardRef<\\n HTMLParagraphElement,\\n React.HTMLAttributes<HTMLParagraphElement>\\n>(({ className, ...props }, ref) => (\\n <div\\n ref={ref}\\n className={cn(\\"text-sm [&_p]:leading-relaxed\\", className)}\\n {...props}\\n />\\n))\\nAlertDescription.displayName = \\"AlertDescription\\"\\n\\nexport { Alert, AlertTitle, AlertDescription }\\n","aspect-ratio":"\\"use client\\"\\n\\nimport * as AspectRatioPrimitive from \\"@radix-ui/react-aspect-ratio\\"\\n\\nconst AspectRatio = AspectRatioPrimitive.Root\\n\\nexport { AspectRatio }\\n","avatar":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport * as AvatarPrimitive from \\"@radix-ui/react-avatar\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst Avatar = React.forwardRef<\\n React.ElementRef<typeof AvatarPrimitive.Root>,\\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\\n>(({ className, ...props }, ref) => (\\n <AvatarPrimitive.Root\\n ref={ref}\\n className={cn(\\n \\"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nAvatar.displayName = AvatarPrimitive.Root.displayName\\n\\nconst AvatarImage = React.forwardRef<\\n React.ElementRef<typeof AvatarPrimitive.Image>,\\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\\n>(({ className, ...props }, ref) => (\\n <AvatarPrimitive.Image\\n ref={ref}\\n className={cn(\\"aspect-square h-full w-full\\", className)}\\n {...props}\\n />\\n))\\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\\n\\nconst AvatarFallback = React.forwardRef<\\n React.ElementRef<typeof AvatarPrimitive.Fallback>,\\n React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\\n>(({ className, ...props }, ref) => (\\n <AvatarPrimitive.Fallback\\n ref={ref}\\n className={cn(\\n \\"flex h-full w-full items-center justify-center rounded-full bg-muted\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\\n\\nexport { Avatar, AvatarImage, AvatarFallback }\\n","badge":"import * as React from \\"react\\"\\nimport { cva, type VariantProps } from \\"class-variance-authority\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst badgeVariants = cva(\\n \\"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\\",\\n {\\n variants: {\\n variant: {\\n default:\\n \\"border-transparent bg-primary text-primary-foreground hover:bg-primary/80\\",\\n secondary:\\n \\"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80\\",\\n destructive:\\n \\"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\\",\\n outline: \\"text-foreground\\",\\n },\\n },\\n defaultVariants: {\\n variant: \\"default\\",\\n },\\n }\\n)\\n\\nexport interface BadgeProps\\n extends React.HTMLAttributes<HTMLDivElement>,\\n VariantProps<typeof badgeVariants> {}\\n\\nfunction Badge({ className, variant, ...props }: BadgeProps) {\\n return (\\n <div className={cn(badgeVariants({ variant }), className)} {...props} />\\n )\\n}\\n\\nexport { Badge, badgeVariants }\\n","breadcrumb":"import * as React from \\"react\\"\\nimport { Slot } from \\"@radix-ui/react-slot\\"\\nimport { ChevronRight, MoreHorizontal } from \\"lucide-react\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst Breadcrumb = React.forwardRef<\\n HTMLElement,\\n React.ComponentPropsWithoutRef<\\"nav\\"> & {\\n separator?: React.ReactNode\\n }\\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\\"breadcrumb\\" {...props} />)\\nBreadcrumb.displayName = \\"Breadcrumb\\"\\n\\nconst BreadcrumbList = React.forwardRef<\\n HTMLOListElement,\\n React.ComponentPropsWithoutRef<\\"ol\\">\\n>(({ className, ...props }, ref) => (\\n <ol\\n ref={ref}\\n className={cn(\\n \\"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nBreadcrumbList.displayName = \\"BreadcrumbList\\"\\n\\nconst BreadcrumbItem = React.forwardRef<\\n HTMLLIElement,\\n React.ComponentPropsWithoutRef<\\"li\\">\\n>(({ className, ...props }, ref) => (\\n <li\\n ref={ref}\\n className={cn(\\"inline-flex items-center gap-1.5\\", className)}\\n {...props}\\n />\\n))\\nBreadcrumbItem.displayName = \\"BreadcrumbItem\\"\\n\\nconst BreadcrumbLink = React.forwardRef<\\n HTMLAnchorElement,\\n React.ComponentPropsWithoutRef<\\"a\\"> & {\\n asChild?: boolean\\n }\\n>(({ asChild, className, ...props }, ref) => {\\n const Comp = asChild ? Slot : \\"a\\"\\n\\n return (\\n <Comp\\n ref={ref}\\n className={cn(\\"transition-colors hover:text-foreground\\", className)}\\n {...props}\\n />\\n )\\n})\\nBreadcrumbLink.displayName = \\"BreadcrumbLink\\"\\n\\nconst BreadcrumbPage = React.forwardRef<\\n HTMLSpanElement,\\n React.ComponentPropsWithoutRef<\\"span\\">\\n>(({ className, ...props }, ref) => (\\n <span\\n ref={ref}\\n role=\\"link\\"\\n aria-disabled=\\"true\\"\\n aria-current=\\"page\\"\\n className={cn(\\"font-normal text-foreground\\", className)}\\n {...props}\\n />\\n))\\nBreadcrumbPage.displayName = \\"BreadcrumbPage\\"\\n\\nconst BreadcrumbSeparator = ({\\n children,\\n className,\\n ...props\\n}: React.ComponentProps<\\"li\\">) => (\\n <li\\n role=\\"presentation\\"\\n aria-hidden=\\"true\\"\\n className={cn(\\"[&>svg]:w-3.5 [&>svg]:h-3.5\\", className)}\\n {...props}\\n >\\n {children ?? <ChevronRight />}\\n </li>\\n)\\nBreadcrumbSeparator.displayName = \\"BreadcrumbSeparator\\"\\n\\nconst BreadcrumbEllipsis = ({\\n className,\\n ...props\\n}: React.ComponentProps<\\"span\\">) => (\\n <span\\n role=\\"presentation\\"\\n aria-hidden=\\"true\\"\\n className={cn(\\"flex h-9 w-9 items-center justify-center\\", className)}\\n {...props}\\n >\\n <MoreHorizontal className=\\"h-4 w-4\\" />\\n <span className=\\"sr-only\\">More</span>\\n </span>\\n)\\nBreadcrumbEllipsis.displayName = \\"BreadcrumbElipssis\\"\\n\\nexport {\\n Breadcrumb,\\n BreadcrumbList,\\n BreadcrumbItem,\\n BreadcrumbLink,\\n BreadcrumbPage,\\n BreadcrumbSeparator,\\n BreadcrumbEllipsis,\\n}\\n","button":"import * as React from \\"react\\"\\nimport { Slot } from \\"@radix-ui/react-slot\\"\\nimport { cva, type VariantProps } from \\"class-variance-authority\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst buttonVariants = cva(\\n \\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\\",\\n {\\n variants: {\\n variant: {\\n default: \\"bg-primary text-primary-foreground hover:bg-primary/90\\",\\n destructive:\\n \\"bg-destructive text-destructive-foreground hover:bg-destructive/90\\",\\n outline:\\n \\"border border-input bg-background hover:bg-accent hover:text-accent-foreground\\",\\n secondary:\\n \\"bg-secondary text-secondary-foreground hover:bg-secondary/80\\",\\n ghost: \\"hover:bg-accent hover:text-accent-foreground\\",\\n link: \\"text-primary underline-offset-4 hover:underline\\",\\n },\\n size: {\\n default: \\"h-10 px-4 py-2\\",\\n sm: \\"h-9 rounded-md px-3\\",\\n lg: \\"h-11 rounded-md px-8\\",\\n icon: \\"h-10 w-10\\",\\n },\\n },\\n defaultVariants: {\\n variant: \\"default\\",\\n size: \\"default\\",\\n },\\n }\\n)\\n\\nexport interface ButtonProps\\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\\n VariantProps<typeof buttonVariants> {\\n asChild?: boolean\\n}\\n\\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\\n ({ className, variant, size, asChild = false, ...props }, ref) => {\\n const Comp = asChild ? Slot : \\"button\\"\\n return (\\n <Comp\\n className={cn(buttonVariants({ variant, size, className }))}\\n ref={ref}\\n {...props}\\n />\\n )\\n }\\n)\\nButton.displayName = \\"Button\\"\\n\\nexport { Button, buttonVariants }\\n","calendar":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport { ChevronLeft, ChevronRight } from \\"lucide-react\\"\\nimport { DayPicker } from \\"react-day-picker\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\nimport { buttonVariants } from \\"@/components/ui/button\\"\\n\\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\\n\\nfunction Calendar({\\n className,\\n classNames,\\n showOutsideDays = true,\\n ...props\\n}: CalendarProps) {\\n return (\\n <DayPicker\\n showOutsideDays={showOutsideDays}\\n className={cn(\\"p-3\\", className)}\\n classNames={{\\n months: \\"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\\",\\n month: \\"space-y-4\\",\\n caption: \\"flex justify-center pt-1 relative items-center\\",\\n caption_label: \\"text-sm font-medium\\",\\n nav: \\"space-x-1 flex items-center\\",\\n nav_button: cn(\\n buttonVariants({ variant: \\"outline\\" }),\\n \\"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\\"\\n ),\\n nav_button_previous: \\"absolute left-1\\",\\n nav_button_next: \\"absolute right-1\\",\\n table: \\"w-full border-collapse space-y-1\\",\\n head_row: \\"flex\\",\\n head_cell:\\n \\"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\\",\\n row: \\"flex w-full mt-2\\",\\n cell: \\"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\\",\\n day: cn(\\n buttonVariants({ variant: \\"ghost\\" }),\\n \\"h-9 w-9 p-0 font-normal aria-selected:opacity-100\\"\\n ),\\n day_range_end: \\"day-range-end\\",\\n day_selected:\\n \\"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\\",\\n day_today: \\"bg-accent text-accent-foreground\\",\\n day_outside:\\n \\"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\\",\\n day_disabled: \\"text-muted-foreground opacity-50\\",\\n day_range_middle:\\n \\"aria-selected:bg-accent aria-selected:text-accent-foreground\\",\\n day_hidden: \\"invisible\\",\\n ...classNames,\\n }}\\n components={{\\n IconLeft: ({ ...props }) => <ChevronLeft className=\\"h-4 w-4\\" />,\\n IconRight: ({ ...props }) => <ChevronRight className=\\"h-4 w-4\\" />,\\n }}\\n {...props}\\n />\\n )\\n}\\nCalendar.displayName = \\"Calendar\\"\\n\\nexport { Calendar }\\n","card":"import * as React from \\"react\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst Card = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => (\\n <div\\n ref={ref}\\n className={cn(\\n \\"rounded-lg border bg-card text-card-foreground shadow-sm\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nCard.displayName = \\"Card\\"\\n\\nconst CardHeader = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => (\\n <div\\n ref={ref}\\n className={cn(\\"flex flex-col space-y-1.5 p-6\\", className)}\\n {...props}\\n />\\n))\\nCardHeader.displayName = \\"CardHeader\\"\\n\\nconst CardTitle = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => (\\n <div\\n ref={ref}\\n className={cn(\\n \\"text-2xl font-semibold leading-none tracking-tight\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nCardTitle.displayName = \\"CardTitle\\"\\n\\nconst CardDescription = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => (\\n <div\\n ref={ref}\\n className={cn(\\"text-sm text-muted-foreground\\", className)}\\n {...props}\\n />\\n))\\nCardDescription.displayName = \\"CardDescription\\"\\n\\nconst CardContent = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => (\\n <div ref={ref} className={cn(\\"p-6 pt-0\\", className)} {...props} />\\n))\\nCardContent.displayName = \\"CardContent\\"\\n\\nconst CardFooter = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => (\\n <div\\n ref={ref}\\n className={cn(\\"flex items-center p-6 pt-0\\", className)}\\n {...props}\\n />\\n))\\nCardFooter.displayName = \\"CardFooter\\"\\n\\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\\n","carousel":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport useEmblaCarousel, {\\n type UseEmblaCarouselType,\\n} from \\"embla-carousel-react\\"\\nimport { ArrowLeft, ArrowRight } from \\"lucide-react\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\nimport { Button } from \\"@/components/ui/button\\"\\n\\ntype CarouselApi = UseEmblaCarouselType[1]\\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\\ntype CarouselOptions = UseCarouselParameters[0]\\ntype CarouselPlugin = UseCarouselParameters[1]\\n\\ntype CarouselProps = {\\n opts?: CarouselOptions\\n plugins?: CarouselPlugin\\n orientation?: \\"horizontal\\" | \\"vertical\\"\\n setApi?: (api: CarouselApi) => void\\n}\\n\\ntype CarouselContextProps = {\\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\\n api: ReturnType<typeof useEmblaCarousel>[1]\\n scrollPrev: () => void\\n scrollNext: () => void\\n canScrollPrev: boolean\\n canScrollNext: boolean\\n} & CarouselProps\\n\\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\\n\\nfunction useCarousel() {\\n const context = React.useContext(CarouselContext)\\n\\n if (!context) {\\n throw new Error(\\"useCarousel must be used within a <Carousel />\\")\\n }\\n\\n return context\\n}\\n\\nconst Carousel = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement> & CarouselProps\\n>(\\n (\\n {\\n orientation = \\"horizontal\\",\\n opts,\\n setApi,\\n plugins,\\n className,\\n children,\\n ...props\\n },\\n ref\\n ) => {\\n const [carouselRef, api] = useEmblaCarousel(\\n {\\n ...opts,\\n axis: orientation === \\"horizontal\\" ? \\"x\\" : \\"y\\",\\n },\\n plugins\\n )\\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\\n const [canScrollNext, setCanScrollNext] = React.useState(false)\\n\\n const onSelect = React.useCallback((api: CarouselApi) => {\\n if (!api) {\\n return\\n }\\n\\n setCanScrollPrev(api.canScrollPrev())\\n setCanScrollNext(api.canScrollNext())\\n }, [])\\n\\n const scrollPrev = React.useCallback(() => {\\n api?.scrollPrev()\\n }, [api])\\n\\n const scrollNext = React.useCallback(() => {\\n api?.scrollNext()\\n }, [api])\\n\\n const handleKeyDown = React.useCallback(\\n (event: React.KeyboardEvent<HTMLDivElement>) => {\\n if (event.key === \\"ArrowLeft\\") {\\n event.preventDefault()\\n scrollPrev()\\n } else if (event.key === \\"ArrowRight\\") {\\n event.preventDefault()\\n scrollNext()\\n }\\n },\\n [scrollPrev, scrollNext]\\n )\\n\\n React.useEffect(() => {\\n if (!api || !setApi) {\\n return\\n }\\n\\n setApi(api)\\n }, [api, setApi])\\n\\n React.useEffect(() => {\\n if (!api) {\\n return\\n }\\n\\n onSelect(api)\\n api.on(\\"reInit\\", onSelect)\\n api.on(\\"select\\", onSelect)\\n\\n return () => {\\n api?.off(\\"select\\", onSelect)\\n }\\n }, [api, onSelect])\\n\\n return (\\n <CarouselContext.Provider\\n value={{\\n carouselRef,\\n api: api,\\n opts,\\n orientation:\\n orientation || (opts?.axis === \\"y\\" ? \\"vertical\\" : \\"horizontal\\"),\\n scrollPrev,\\n scrollNext,\\n canScrollPrev,\\n canScrollNext,\\n }}\\n >\\n <div\\n ref={ref}\\n onKeyDownCapture={handleKeyDown}\\n className={cn(\\"relative\\", className)}\\n role=\\"region\\"\\n aria-roledescription=\\"carousel\\"\\n {...props}\\n >\\n {children}\\n </div>\\n </CarouselContext.Provider>\\n )\\n }\\n)\\nCarousel.displayName = \\"Carousel\\"\\n\\nconst CarouselContent = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => {\\n const { carouselRef, orientation } = useCarousel()\\n\\n return (\\n <div ref={carouselRef} className=\\"overflow-hidden\\">\\n <div\\n ref={ref}\\n className={cn(\\n \\"flex\\",\\n orientation === \\"horizontal\\" ? \\"-ml-4\\" : \\"-mt-4 flex-col\\",\\n className\\n )}\\n {...props}\\n />\\n </div>\\n )\\n})\\nCarouselContent.displayName = \\"CarouselContent\\"\\n\\nconst CarouselItem = React.forwardRef<\\n HTMLDivElement,\\n React.HTMLAttributes<HTMLDivElement>\\n>(({ className, ...props }, ref) => {\\n const { orientation } = useCarousel()\\n\\n return (\\n <div\\n ref={ref}\\n role=\\"group\\"\\n aria-roledescription=\\"slide\\"\\n className={cn(\\n \\"min-w-0 shrink-0 grow-0 basis-full\\",\\n orientation === \\"horizontal\\" ? \\"pl-4\\" : \\"pt-4\\",\\n className\\n )}\\n {...props}\\n />\\n )\\n})\\nCarouselItem.displayName = \\"CarouselItem\\"\\n\\nconst CarouselPrevious = React.forwardRef<\\n HTMLButtonElement,\\n React.ComponentProps<typeof Button>\\n>(({ className, variant = \\"outline\\", size = \\"icon\\", ...props }, ref) => {\\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\\n\\n return (\\n <Button\\n ref={ref}\\n variant={variant}\\n size={size}\\n className={cn(\\n \\"absolute h-8 w-8 rounded-full\\",\\n orientation === \\"horizontal\\"\\n ? \\"-left-12 top-1/2 -translate-y-1/2\\"\\n : \\"-top-12 left-1/2 -translate-x-1/2 rotate-90\\",\\n className\\n )}\\n disabled={!canScrollPrev}\\n onClick={scrollPrev}\\n {...props}\\n >\\n <ArrowLeft className=\\"h-4 w-4\\" />\\n <span className=\\"sr-only\\">Previous slide</span>\\n </Button>\\n )\\n})\\nCarouselPrevious.displayName = \\"CarouselPrevious\\"\\n\\nconst CarouselNext = React.forwardRef<\\n HTMLButtonElement,\\n React.ComponentProps<typeof Button>\\n>(({ className, variant = \\"outline\\", size = \\"icon\\", ...props }, ref) => {\\n const { orientation, scrollNext, canScrollNext } = useCarousel()\\n\\n return (\\n <Button\\n ref={ref}\\n variant={variant}\\n size={size}\\n className={cn(\\n \\"absolute h-8 w-8 rounded-full\\",\\n orientation === \\"horizontal\\"\\n ? \\"-right-12 top-1/2 -translate-y-1/2\\"\\n : \\"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\\",\\n className\\n )}\\n disabled={!canScrollNext}\\n onClick={scrollNext}\\n {...props}\\n >\\n <ArrowRight className=\\"h-4 w-4\\" />\\n <span className=\\"sr-only\\">Next slide</span>\\n </Button>\\n )\\n})\\nCarouselNext.displayName = \\"CarouselNext\\"\\n\\nexport {\\n type CarouselApi,\\n Carousel,\\n CarouselContent,\\n CarouselItem,\\n CarouselPrevious,\\n CarouselNext,\\n}\\n","chart":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport * as RechartsPrimitive from \\"recharts\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\n// Format: { THEME_NAME: CSS_SELECTOR }\\nconst THEMES = { light: \\"\\", dark: \\".dark\\" } as const\\n\\nexport type ChartConfig = {\\n [k in string]: {\\n label?: React.ReactNode\\n icon?: React.ComponentType\\n } & (\\n | { color?: string; theme?: never }\\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\\n )\\n}\\n\\ntype ChartContextProps = {\\n config: ChartConfig\\n}\\n\\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\\n\\nfunction useChart() {\\n const context = React.useContext(ChartContext)\\n\\n if (!context) {\\n throw new Error(\\"useChart must be used within a <ChartContainer />\\")\\n }\\n\\n return context\\n}\\n\\nconst ChartContainer = React.forwardRef<\\n HTMLDivElement,\\n React.ComponentProps<\\"div\\"> & {\\n config: ChartConfig\\n children: React.ComponentProps<\\n typeof RechartsPrimitive.ResponsiveContainer\\n >[\\"children\\"]\\n }\\n>(({ id, className, children, config, ...props }, ref) => {\\n const uniqueId = React.useId()\\n const chartId = `chart-${id || uniqueId.replace(/:/g, \\"\\")}`\\n\\n return (\\n <ChartContext.Provider value={{ config }}>\\n <div\\n data-chart={chartId}\\n ref={ref}\\n className={cn(\\n \\"flex aspect-video justify-center text-xs [&_.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-dot[stroke=\'#fff\']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.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 [&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none\\",\\n className\\n )}\\n {...props}\\n >\\n <ChartStyle id={chartId} config={config} />\\n <RechartsPrimitive.ResponsiveContainer>\\n {children}\\n </RechartsPrimitive.ResponsiveContainer>\\n </div>\\n </ChartContext.Provider>\\n )\\n})\\nChartContainer.displayName = \\"Chart\\"\\n\\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\\n const colorConfig = Object.entries(config).filter(\\n ([_, config]) => config.theme || config.color\\n )\\n\\n if (!colorConfig.length) {\\n return null\\n }\\n\\n return (\\n <style\\n dangerouslySetInnerHTML={{\\n __html: Object.entries(THEMES)\\n .map(\\n ([theme, prefix]) => `\\n${prefix} [data-chart=${id}] {\\n${colorConfig\\n .map(([key, itemConfig]) => {\\n const color =\\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\\n itemConfig.color\\n return color ? ` --color-${key}: ${color};` : null\\n })\\n .join(\\"\\\\n\\")}\\n}\\n`\\n )\\n .join(\\"\\\\n\\"),\\n }}\\n />\\n )\\n}\\n\\nconst ChartTooltip = RechartsPrimitive.Tooltip\\n\\nconst ChartTooltipContent = React.forwardRef<\\n HTMLDivElement,\\n React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\\n React.ComponentProps<\\"div\\"> & {\\n hideLabel?: boolean\\n hideIndicator?: boolean\\n indicator?: \\"line\\" | \\"dot\\" | \\"dashed\\"\\n nameKey?: string\\n labelKey?: string\\n }\\n>(\\n (\\n {\\n active,\\n payload,\\n className,\\n indicator = \\"dot\\",\\n hideLabel = false,\\n hideIndicator = false,\\n label,\\n labelFormatter,\\n labelClassName,\\n formatter,\\n color,\\n nameKey,\\n labelKey,\\n },\\n ref\\n ) => {\\n const { config } = useChart()\\n\\n const tooltipLabel = React.useMemo(() => {\\n if (hideLabel || !payload?.length) {\\n return null\\n }\\n\\n const [item] = payload\\n const key = `${labelKey || item.dataKey || item.name || \\"value\\"}`\\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\\n const value =\\n !labelKey && typeof label === \\"string\\"\\n ? config[label as keyof typeof config]?.label || label\\n : itemConfig?.label\\n\\n if (labelFormatter) {\\n return (\\n <div className={cn(\\"font-medium\\", labelClassName)}>\\n {labelFormatter(value, payload)}\\n </div>\\n )\\n }\\n\\n if (!value) {\\n return null\\n }\\n\\n return <div className={cn(\\"font-medium\\", labelClassName)}>{value}</div>\\n }, [\\n label,\\n labelFormatter,\\n payload,\\n hideLabel,\\n labelClassName,\\n config,\\n labelKey,\\n ])\\n\\n if (!active || !payload?.length) {\\n return null\\n }\\n\\n const nestLabel = payload.length === 1 && indicator !== \\"dot\\"\\n\\n return (\\n <div\\n ref={ref}\\n className={cn(\\n \\"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\\",\\n className\\n )}\\n >\\n {!nestLabel ? tooltipLabel : null}\\n <div className=\\"grid gap-1.5\\">\\n {payload.map((item, index) => {\\n const key = `${nameKey || item.name || item.dataKey || \\"value\\"}`\\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\\n const indicatorColor = color || item.payload.fill || item.color\\n\\n return (\\n <div\\n key={item.dataKey}\\n className={cn(\\n \\"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\\",\\n indicator === \\"dot\\" && \\"items-center\\"\\n )}\\n >\\n {formatter && item?.value !== undefined && item.name ? (\\n formatter(item.value, item.name, item, index, item.payload)\\n ) : (\\n <>\\n {itemConfig?.icon ? (\\n <itemConfig.icon />\\n ) : (\\n !hideIndicator && (\\n <div\\n className={cn(\\n \\"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\\",\\n {\\n \\"h-2.5 w-2.5\\": indicator === \\"dot\\",\\n \\"w-1\\": indicator === \\"line\\",\\n \\"w-0 border-[1.5px] border-dashed bg-transparent\\":\\n indicator === \\"dashed\\",\\n \\"my-0.5\\": nestLabel && indicator === \\"dashed\\",\\n }\\n )}\\n style={\\n {\\n \\"--color-bg\\": indicatorColor,\\n \\"--color-border\\": indicatorColor,\\n } as React.CSSProperties\\n }\\n />\\n )\\n )}\\n <div\\n className={cn(\\n \\"flex flex-1 justify-between leading-none\\",\\n nestLabel ? \\"items-end\\" : \\"items-center\\"\\n )}\\n >\\n <div className=\\"grid gap-1.5\\">\\n {nestLabel ? tooltipLabel : null}\\n <span className=\\"text-muted-foreground\\">\\n {itemConfig?.label || item.name}\\n </span>\\n </div>\\n {item.value && (\\n <span className=\\"font-mono font-medium tabular-nums text-foreground\\">\\n {item.value.toLocaleString()}\\n </span>\\n )}\\n </div>\\n </>\\n )}\\n </div>\\n )\\n })}\\n </div>\\n </div>\\n )\\n }\\n)\\nChartTooltipContent.displayName = \\"ChartTooltip\\"\\n\\nconst ChartLegend = RechartsPrimitive.Legend\\n\\nconst ChartLegendContent = React.forwardRef<\\n HTMLDivElement,\\n React.ComponentProps<\\"div\\"> &\\n Pick<RechartsPrimitive.LegendProps, \\"payload\\" | \\"verticalAlign\\"> & {\\n hideIcon?: boolean\\n nameKey?: string\\n }\\n>(\\n (\\n { className, hideIcon = false, payload, verticalAlign = \\"bottom\\", nameKey },\\n ref\\n ) => {\\n const { config } = useChart()\\n\\n if (!payload?.length) {\\n return null\\n }\\n\\n return (\\n <div\\n ref={ref}\\n className={cn(\\n \\"flex items-center justify-center gap-4\\",\\n verticalAlign === \\"top\\" ? \\"pb-3\\" : \\"pt-3\\",\\n className\\n )}\\n >\\n {payload.map((item) => {\\n const key = `${nameKey || item.dataKey || \\"value\\"}`\\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\\n\\n return (\\n <div\\n key={item.value}\\n className={cn(\\n \\"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\\"\\n )}\\n >\\n {itemConfig?.icon && !hideIcon ? (\\n <itemConfig.icon />\\n ) : (\\n <div\\n className=\\"h-2 w-2 shrink-0 rounded-[2px]\\"\\n style={{\\n backgroundColor: item.color,\\n }}\\n />\\n )}\\n {itemConfig?.label}\\n </div>\\n )\\n })}\\n </div>\\n )\\n }\\n)\\nChartLegendContent.displayName = \\"ChartLegend\\"\\n\\n// Helper to extract item config from a payload.\\nfunction getPayloadConfigFromPayload(\\n config: ChartConfig,\\n payload: unknown,\\n key: string\\n) {\\n if (typeof payload !== \\"object\\" || payload === null) {\\n return undefined\\n }\\n\\n const payloadPayload =\\n \\"payload\\" in payload &&\\n typeof payload.payload === \\"object\\" &&\\n payload.payload !== null\\n ? payload.payload\\n : undefined\\n\\n let configLabelKey: string = key\\n\\n if (\\n key in payload &&\\n typeof payload[key as keyof typeof payload] === \\"string\\"\\n ) {\\n configLabelKey = payload[key as keyof typeof payload] as string\\n } else if (\\n payloadPayload &&\\n key in payloadPayload &&\\n typeof payloadPayload[key as keyof typeof payloadPayload] === \\"string\\"\\n ) {\\n configLabelKey = payloadPayload[\\n key as keyof typeof payloadPayload\\n ] as string\\n }\\n\\n return configLabelKey in config\\n ? config[configLabelKey]\\n : config[key as keyof typeof config]\\n}\\n\\nexport {\\n ChartContainer,\\n ChartTooltip,\\n ChartTooltipContent,\\n ChartLegend,\\n ChartLegendContent,\\n ChartStyle,\\n}\\n","checkbox":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport * as CheckboxPrimitive from \\"@radix-ui/react-checkbox\\"\\nimport { Check } from \\"lucide-react\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\n\\nconst Checkbox = React.forwardRef<\\n React.ElementRef<typeof CheckboxPrimitive.Root>,\\n React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\\n>(({ className, ...props }, ref) => (\\n <CheckboxPrimitive.Root\\n ref={ref}\\n className={cn(\\n \\"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\\",\\n className\\n )}\\n {...props}\\n >\\n <CheckboxPrimitive.Indicator\\n className={cn(\\"flex items-center justify-center text-current\\")}\\n >\\n <Check className=\\"h-4 w-4\\" />\\n </CheckboxPrimitive.Indicator>\\n </CheckboxPrimitive.Root>\\n))\\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\\n\\nexport { Checkbox }\\n","collapsible":"\\"use client\\"\\n\\nimport * as CollapsiblePrimitive from \\"@radix-ui/react-collapsible\\"\\n\\nconst Collapsible = CollapsiblePrimitive.Root\\n\\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\\n\\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\\n\\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\\n","command":"\\"use client\\"\\n\\nimport * as React from \\"react\\"\\nimport { type DialogProps } from \\"@radix-ui/react-dialog\\"\\nimport { Command as CommandPrimitive } from \\"cmdk\\"\\nimport { Search } from \\"lucide-react\\"\\n\\nimport { cn } from \\"@/lib/utils\\"\\nimport { Dialog, DialogContent } from \\"@/components/ui/dialog\\"\\n\\nconst Command = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive>\\n>(({ className, ...props }, ref) => (\\n <CommandPrimitive\\n ref={ref}\\n className={cn(\\n \\"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\\",\\n className\\n )}\\n {...props}\\n />\\n))\\nCommand.displayName = CommandPrimitive.displayName\\n\\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\\n return (\\n <Dialog {...props}>\\n <DialogContent className=\\"overflow-hidden p-0 shadow-lg\\">\\n <Command className=\\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\\">\\n {children}\\n </Command>\\n </DialogContent>\\n </Dialog>\\n )\\n}\\n\\nconst CommandInput = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive.Input>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\\n>(({ className, ...props }, ref) => (\\n <div className=\\"flex items-center border-b px-3\\" cmdk-input-wrapper=\\"\\">\\n <Search className=\\"mr-2 h-4 w-4 shrink-0 opacity-50\\" />\\n <CommandPrimitive.Input\\n ref={ref}\\n className={cn(\\n \\"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\\",\\n className\\n )}\\n {...props}\\n />\\n </div>\\n))\\n\\nCommandInput.displayName = CommandPrimitive.Input.displayName\\n\\nconst CommandList = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive.List>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\\n>(({ className, ...props }, ref) => (\\n <CommandPrimitive.List\\n ref={ref}\\n className={cn(\\"max-h-[300px] overflow-y-auto overflow-x-hidden\\", className)}\\n {...props}\\n />\\n))\\n\\nCommandList.displayName = CommandPrimitive.List.displayName\\n\\nconst CommandEmpty = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive.Empty>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\\n>((props, ref) => (\\n <CommandPrimitive.Empty\\n ref={ref}\\n className=\\"py-6 text-center text-sm\\"\\n {...props}\\n />\\n))\\n\\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\\n\\nconst CommandGroup = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive.Group>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\\n>(({ className, ...props }, ref) => (\\n <CommandPrimitive.Group\\n ref={ref}\\n className={cn(\\n \\"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\\",\\n className\\n )}\\n {...props}\\n />\\n))\\n\\nCommandGroup.displayName = CommandPrimitive.Group.displayName\\n\\nconst CommandSeparator = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive.Separator>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\\n>(({ className, ...props }, ref) => (\\n <CommandPrimitive.Separator\\n ref={ref}\\n className={cn(\\"-mx-1 h-px bg-border\\", className)}\\n {...props}\\n />\\n))\\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\\n\\nconst CommandItem = React.forwardRef<\\n React.ElementRef<typeof CommandPrimitive.Item>,\\n React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\\n>(({ className, ...props }, ref) => (\\n <CommandPrimitive.Item\\n ref={ref}\\n className={cn(\\n \\"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=\'true\']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\\",\\n className\\n )}\\n {...props}\\n />\\n))\\n\\nCommandItem.displayName = CommandPrimitive.Item.displayName\\n\\nconst CommandShortcut = ({\\n className,\\n ...props\\n}: React.HTMLAttributes<HTMLSpanElement>) => {\\n return (\\n <span\\n className={cn(\\n \\"ml-auto text-xs tracking-widest text-muted-foreground\\",\\n className\\n