@21st-dev/magic
Version:
Magic MCP UI builder by 21st.dev
1 lines • 211 kB
JavaScript
(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[974],{4239:(e,n,t)=>{Promise.resolve().then(t.bind(t,73384))},73384:(e,n,t)=>{"use strict";t.d(n,{default:()=>eC});var a=t(95155),r=t(12115);let o=async e=>{try{let n=await fetch("/callback/".concat(e),{method:"GET",headers:{"Content-Type":"application/json"}});if(!n.ok)throw Error("HTTP error! status: ".concat(n.status));return(await n.json()).data}catch(e){throw console.error("Error fetching callback data:",e),e}},i=async(e,n)=>{try{let t=await fetch("/callback/".concat(e),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});if(!t.ok)throw Error("HTTP error! status: ".concat(t.status));return await t.json()}catch(e){throw console.error("Error posting callback:",e),e}},s=async(e,n)=>{try{let t=await fetch("/fix-code-error/".concat(e),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});if(!t.ok){let e=await t.json();throw Error(e.message||"HTTP error! status: ".concat(t.status))}return(await t.json()).data}catch(e){throw console.error("Error fixing code error:",e),e}};var l=t(52596),c=t(39688);function d(){for(var e=arguments.length,n=Array(e),t=0;t<e;t++)n[t]=arguments[t];return(0,c.QP)((0,l.$)(n))}function m(e){return e?e.replace(/```tsx\n|```\n|```/g,""):""}var p=t(6874),f=t.n(p),u=t(62098),g=t(93509),v=t(51362),b=t(99708);let h=(0,t(74466).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 dark:text-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"}}),x=r.forwardRef((e,n)=>{let{className:t,variant:r,size:o,asChild:i=!1,...s}=e,l=i?b.DX:"button";return(0,a.jsx)(l,{className:d(h({variant:r,size:o,className:t})),ref:n,...s})});x.displayName="Button";var R=t(37619);function y(e){let{fill:n="currentColor",className:t=""}=e,r=(0,a.jsxs)("svg",{width:24,height:24,viewBox:"0 0 60 60",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[(0,a.jsx)("path",{d:"M0 20C0 8.95431 8.95431 0 20 0C31.0457 0 40 8.95431 40 20C40 31.0457 31.5 35.5 20 40H40C40 51.0457 31.0457 60 20 60C8.95431 60 0 51.0457 0 40C0 28.9543 9.5 22 20 20H0Z",fill:n}),(0,a.jsx)("path",{d:"M40 60C51.7324 55.0977 60 43.5117 60 30C60 16.4883 51.7324 4.90234 40 0V60Z",fill:n})]});return(0,a.jsx)("a",{href:"https://21st.dev",target:"_blank",className:d("w-5 h-5 flex items-center justify-center rounded-full",t),children:r})}let N=()=>(0,a.jsx)("svg",{"data-testid":"geist-icon",height:"16",strokeLinejoin:"round",viewBox:"0 0 16 16",width:"16",className:"h-2.5 w-2.5",children:(0,a.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M13.5 3V2.25H15V3V10C15 10.5523 14.5523 11 14 11H3.56068L5.53035 12.9697L6.06068 13.5L5.00002 14.5607L4.46969 14.0303L1.39647 10.9571C1.00595 10.5666 1.00595 9.93342 1.39647 9.54289L4.46969 6.46967L5.00002 5.93934L6.06068 7L5.53035 7.53033L3.56068 9.5H13.5V3Z",fill:"currentColor"})});function P(e){let{focusedVariant:n,onAccept:t,fullscreenVariant:o}=e,{resolvedTheme:i,setTheme:s}=(0,v.D)(),[l,c]=(0,r.useState)(!1);(0,r.useEffect)(()=>{c(!0)},[]);let m=l?i:"light",p=null!=o?o:n;return(0,a.jsx)("header",{className:d("border-b border-border/40 z-50 relative bg-background"),children:(0,a.jsx)("div",{className:"container mx-auto px-[var(--container-x-padding)] max-w-[3680px] [--container-x-padding:20px] min-720:[--container-x-padding:24px] min-1280:[--container-x-padding:32px] min-1536:[--container-x-padding:80px]",children:(0,a.jsxs)("div",{className:"flex h-14 items-center justify-between py-0",children:[(0,a.jsxs)("div",{className:"flex items-center gap-2 text-sm",children:[(0,a.jsx)(y,{}),(0,a.jsx)("span",{className:"text-muted-foreground",children:"/"}),(0,a.jsx)("span",{className:"font-medium",children:"Magic"}),(0,a.jsx)("span",{className:"text-muted-foreground",children:"/"}),(0,a.jsxs)("span",{className:"text-muted-foreground",children:["Component generations",null!=o&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{className:"text-muted-foreground",children:" / "}),(0,a.jsxs)("span",{className:"text-muted-foreground",children:["Variant ",o]})]})]})]}),(0,a.jsxs)("div",{className:"flex items-center gap-2",children:[(0,a.jsxs)("fieldset",{className:"flex items-center rounded-full border border-border/40 bg-background",children:[(0,a.jsx)("legend",{className:"sr-only",children:"Select a display theme:"}),(0,a.jsxs)("span",{children:[(0,a.jsx)("input",{type:"radio",id:"theme-switch-light",value:"light",name:"theme",className:"sr-only peer",checked:"light"===m,onChange:()=>s("light")}),(0,a.jsxs)("label",{htmlFor:"theme-switch-light",className:"inline-flex items-center justify-center rounded-full p-1.5 text-sm cursor-pointer text-muted-foreground hover:text-foreground peer-checked:bg-accent peer-checked:text-foreground",children:[(0,a.jsx)("span",{className:"sr-only",children:"light"}),(0,a.jsx)(u.A,{className:"h-4 w-4"})]})]}),(0,a.jsxs)("span",{children:[(0,a.jsx)("input",{type:"radio",id:"theme-switch-dark",value:"dark",name:"theme",className:"sr-only peer",checked:"dark"===m,onChange:()=>s("dark")}),(0,a.jsxs)("label",{htmlFor:"theme-switch-dark",className:"inline-flex items-center justify-center rounded-full p-1.5 text-sm cursor-pointer text-muted-foreground hover:text-foreground peer-checked:bg-accent peer-checked:text-foreground",children:[(0,a.jsx)("span",{className:"sr-only",children:"dark"}),(0,a.jsx)(g.A,{className:"h-4 w-4"})]})]})]}),(0,a.jsx)(f(),{href:"https://discord.gg/Qx4rFunHfm",target:"_blank",children:(0,a.jsx)(x,{variant:"outline",children:"Report a bug"})}),(0,a.jsxs)(x,{onClick:t,className:"gap-1 justify-between pr-1.5",children:[(0,a.jsxs)("span",{className:"flex items-center gap-1",children:["Accept Variant",(0,a.jsx)(R.Ay,{value:p,className:"min-w-[10px] flex items-center justify-start"})]}),(0,a.jsx)("kbd",{className:"pointer-events-none h-5 select-none items-center gap-1 rounded border border-white/20 bg-white/10 px-1.5 font-sans text-[11px] leading-none opacity-100 flex",children:(0,a.jsx)(N,{})})]})]})]})})})}let C=r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:d("rounded-lg border bg-card text-card-foreground shadow-sm",t),...r})});C.displayName="Card",r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:d("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:d("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:d("text-sm text-muted-foreground",t),...r})}).displayName="CardDescription";let w=r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:d("p-6 pt-0",t),...r})});w.displayName="CardContent",r.forwardRef((e,n)=>{let{className:t,...r}=e;return(0,a.jsx)("div",{ref:n,className:d("flex items-center p-6 pt-0",t),...r})}).displayName="CardFooter";var S=t(24357),T=t(92657),M=t(29621),k=t(74311),D=t(91981);let I=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 CollapsiblePrimiti