{
  "@/registry/ui/accordion": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\r\nimport * as React from \"react\"\r\nimport { LuPlus } from \"react-icons/lu\"\r\n\r\nconst Accordion = React.forwardRef<\r\n  React.ElementRef<typeof AccordionPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <AccordionPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\"w-full\", className)}\r\n    {...props}\r\n  />\r\n))\r\nAccordion.displayName = \"Accordion\"\r\n\r\nconst AccordionItem = React.forwardRef<\r\n  React.ElementRef<typeof AccordionPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n  <AccordionPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"border-b border-gray-200 dark:border-gray-800 overflow-hidden mb-2\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAccordionItem.displayName = \"AccordionItem\"\r\n\r\nconst AccordionTrigger = React.forwardRef<\r\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n  <AccordionPrimitive.Header className=\"flex\">\r\n    <AccordionPrimitive.Trigger\r\n      ref={ref}\r\n      className={cn(\r\n        \"flex flex-1 items-center justify-between px-6 py-4 text-base font-medium text-gray-900 dark:text-gray-100 transition-all\",\r\n        \"group\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <div className=\"relative h-5 w-5 shrink-0\">\r\n        <LuPlus className=\"absolute h-5 w-5 transition-transform duration-300 group-data-[state=open]:rotate-45\" />\r\n      </div>\r\n    </AccordionPrimitive.Trigger>\r\n  </AccordionPrimitive.Header>\r\n))\r\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\r\n\r\nconst AccordionContent = React.forwardRef<\r\n  React.ElementRef<typeof AccordionPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\r\n>(({ className, children, ...props }, ref) => (\r\n  <AccordionPrimitive.Content\r\n    ref={ref}\r\n    className={cn(\r\n      \"overflow-hidden text-sm text-gray-700 dark:text-gray-300\",\r\n      \"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <div className={cn(\"px-6 pb-6 pt-0\", className)}>{children}</div>\r\n  </AccordionPrimitive.Content>\r\n))\r\n\r\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\r\n\r\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/alert-dialog": {
    "content": "import { buttonVariants } from \"@/components/ui/button\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nconst AlertDialog = AlertDialogPrimitive.Root\r\n\r\nconst AlertDialogTrigger = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n  <AlertDialogPrimitive.Trigger ref={ref} className={cn(className)} {...props}>\r\n    {children}\r\n  </AlertDialogPrimitive.Trigger>\r\n))\r\nAlertDialogTrigger.displayName = AlertDialogPrimitive.Trigger.displayName\r\n\r\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\r\n\r\nconst AlertDialogOverlay = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <AlertDialogPrimitive.Overlay\r\n    className={cn(\r\n      \"fixed inset-0 z-50 bg-black/80 transition\",\r\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      className\r\n    )}\r\n    {...props}\r\n    ref={ref}\r\n  />\r\n))\r\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\r\n\r\nconst alertDialogContentVariants = cva(\r\n  \"fixed z-50 lg:w-full w-[92%] max-w-md rounded-2xl border-none shadow-2xl\",\r\n  {\r\n    variants: {\r\n      appearance: {\r\n        default: \"bg-white/95 dark:bg-neutral-900\",\r\n        destructive: \"bg-red-50/95 dark:bg-red-950/90\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      appearance: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nexport interface AlertDialogContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,\r\n  VariantProps<typeof alertDialogContentVariants> {\r\n  closeOnClickOutside?: boolean\r\n}\r\n\r\nconst AlertDialogContent = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\r\n  AlertDialogContentProps\r\n>(({ className, appearance, closeOnClickOutside = true, ...props }, ref) => (\r\n  <AlertDialogPortal>\r\n    <AlertDialogOverlay\r\n      onClick={closeOnClickOutside ? undefined : (e) => e.stopPropagation()}\r\n    />\r\n    <AlertDialogPrimitive.Content\r\n      ref={ref}\r\n      className={cn(\r\n        alertDialogContentVariants({ appearance }),\r\n        \"fixed left-[50%] top-[50%] z-50  translate-x-[-50%] translate-y-[-50%]\",\r\n        \"p-6 \",\r\n        \"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%]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </AlertDialogPortal>\r\n))\r\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\r\n\r\nconst AlertDialogHeader = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div className={cn(\"space-y-2 mb-4\", className)} {...props} />\r\n)\r\nAlertDialogHeader.displayName = \"AlertDialogHeader\"\r\n\r\nconst AlertDialogFooter = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\r\n      \"flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 mt-4\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n)\r\nAlertDialogFooter.displayName = \"AlertDialogFooter\"\r\n\r\nconst AlertDialogTitle = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\r\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n  <AlertDialogPrimitive.Title\r\n    ref={ref}\r\n    className={cn(\r\n      \"text-xl font-semibold text-gray-900 dark:text-gray-100\",\r\n      \"tracking-tight\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\r\n\r\nconst AlertDialogDescription = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n  <AlertDialogPrimitive.Description\r\n    ref={ref}\r\n    className={cn(\r\n      \"text-base text-muted-foreground\",\r\n      \"leading-relaxed\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAlertDialogDescription.displayName =\r\n  AlertDialogPrimitive.Description.displayName\r\n\r\nconst AlertDialogAction = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\r\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {\r\n    variant?: VariantProps<typeof buttonVariants>[\"variant\"]\r\n    size?: VariantProps<typeof buttonVariants>[\"size\"]\r\n  }\r\n>(({ className, variant = \"default\", size = \"default\", ...props }, ref) => (\r\n  <AlertDialogPrimitive.Action\r\n    ref={ref}\r\n    className={cn(\r\n      buttonVariants({ variant, size }),\r\n      \"rounded-full text-base font-semibold px-4 py-2\",\r\n      \"transition-colors duration-200 ease-in-out\",\r\n      \"focus:outline-none focus:ring-2 focus:ring-blue-500/50\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\r\n\r\nconst AlertDialogCancel = React.forwardRef<\r\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\r\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {\r\n    variant?: VariantProps<typeof buttonVariants>[\"variant\"]\r\n    size?: VariantProps<typeof buttonVariants>[\"size\"]\r\n  }\r\n>(({ className, variant = \"ghost\", size = \"default\", ...props }, ref) => (\r\n  <AlertDialogPrimitive.Cancel\r\n    ref={ref}\r\n    className={cn(\r\n      buttonVariants({ variant, size }),\r\n      \"rounded-full text-base font-semibold px-4 py-2\",\r\n      \"text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800\",\r\n      \"transition-colors duration-200 ease-in-out\",\r\n      \"border-border border\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\r\n\r\nexport {\r\n  AlertDialog,\r\n  AlertDialogAction,\r\n  AlertDialogCancel,\r\n  AlertDialogContent,\r\n  alertDialogContentVariants,\r\n  AlertDialogDescription,\r\n  AlertDialogFooter,\r\n  AlertDialogHeader,\r\n  AlertDialogOverlay,\r\n  AlertDialogPortal,\r\n  AlertDialogTitle,\r\n  AlertDialogTrigger\r\n}",
    "language": "tsx"
  },
  "@/registry/ui/alert": {
    "content": "import * as React from \"react\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst alertVariants = cva(\r\n  \"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"bg-background text-foreground\",\r\n        destructive:\r\n          \"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nconst Alert = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\r\n>(({ className, variant, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    role=\"alert\"\r\n    className={cn(alertVariants({ variant }), className)}\r\n    {...props}\r\n  />\r\n))\r\nAlert.displayName = \"Alert\"\r\n\r\nconst AlertTitle = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLHeadingElement>\r\n>(({ className, ...props }, ref) => (\r\n  <h5\r\n    ref={ref}\r\n    className={cn(\"mb-1 font-medium leading-none tracking-tight\", className)}\r\n    {...props}\r\n  />\r\n))\r\nAlertTitle.displayName = \"AlertTitle\"\r\n\r\nconst AlertDescription = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"text-sm [&_p]:leading-relaxed\", className)}\r\n    {...props}\r\n  />\r\n))\r\nAlertDescription.displayName = \"AlertDescription\"\r\n\r\nexport { Alert, AlertTitle, AlertDescription }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/aspect-ratio": {
    "content": "\"use client\"\r\n\r\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\"\r\n\r\nfunction AspectRatio({\r\n    ...props\r\n}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\r\n    return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />\r\n}\r\n\r\nexport { AspectRatio }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/avatar": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\r\nimport * as React from \"react\"\r\n\r\nconst Avatar = React.forwardRef<\r\n  React.ElementRef<typeof AvatarPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <AvatarPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAvatar.displayName = AvatarPrimitive.Root.displayName\r\n\r\nconst AvatarImage = React.forwardRef<\r\n  React.ElementRef<typeof AvatarPrimitive.Image>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\r\n>(({ className, ...props }, ref) => (\r\n  <AvatarPrimitive.Image\r\n    ref={ref}\r\n    className={cn(\"aspect-square h-full w-full\", className)}\r\n    {...props}\r\n  />\r\n))\r\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\r\n\r\nconst AvatarFallback = React.forwardRef<\r\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\r\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\r\n>(({ className, ...props }, ref) => (\r\n  <AvatarPrimitive.Fallback\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\r\n\r\nexport { Avatar, AvatarFallback, AvatarImage }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/badge": {
    "content": "import { cn } from \"@/lib/utils\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nconst badgeVariants = cva(\r\n  \"inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"border-transparent bg-primary/90 text-primary-foreground backdrop-blur-sm shadow-sm hover:bg-primary/80\",\r\n        secondary:\r\n          \"border-transparent bg-secondary/90 text-secondary-foreground backdrop-blur-sm shadow-sm hover:bg-secondary/80\",\r\n        destructive:\r\n          \"border-transparent bg-destructive/90 text-destructive-foreground backdrop-blur-sm shadow-sm hover:bg-destructive/80\",\r\n        outline:\r\n          \"border border-border/40 text-foreground bg-background/50 backdrop-blur-sm hover:bg-muted/20\",\r\n        success:\r\n          \"border-transparent bg-green-500/90 text-white backdrop-blur-sm shadow-sm hover:bg-green-500/80\",\r\n        warning:\r\n          \"border-transparent bg-amber-500/90 text-white backdrop-blur-sm shadow-sm hover:bg-amber-500/80\",\r\n        info: \"border-transparent bg-blue-500/90 text-white backdrop-blur-sm shadow-sm hover:bg-blue-500/80\",\r\n      },\r\n      removable: {\r\n        true: \"pr-1\",\r\n        false: \"\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      removable: false,\r\n    },\r\n  }\r\n)\r\n\r\nexport interface BadgeProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n  VariantProps<typeof badgeVariants> {\r\n  removable?: boolean\r\n  onRemove?: () => void\r\n  icon?: React.ReactNode\r\n}\r\n\r\nfunction Badge({\r\n  className,\r\n  variant,\r\n  removable,\r\n  onRemove,\r\n  icon,\r\n  children,\r\n  ...props\r\n}: BadgeProps) {\r\n  return (\r\n    <div\r\n      className={cn(badgeVariants({ variant, removable }), className)}\r\n      {...props}\r\n    >\r\n      {icon && <span className=\"flex items-center\">{icon}</span>}\r\n      {children}\r\n      {removable && (\r\n        <button\r\n          type=\"button\"\r\n          className=\"ml-1 rounded-full p-0.5 text-current opacity-70 hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring\"\r\n          onClick={(e) => {\r\n            e.stopPropagation()\r\n            onRemove?.()\r\n          }}\r\n          aria-hidden=\"true\"\r\n        >\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            width=\"14\"\r\n            height=\"14\"\r\n            viewBox=\"0 0 24 24\"\r\n            fill=\"none\"\r\n            stroke=\"currentColor\"\r\n            strokeWidth=\"2\"\r\n            strokeLinecap=\"round\"\r\n            strokeLinejoin=\"round\"\r\n          >\r\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n          </svg>\r\n        </button>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Badge, badgeVariants }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/breadcrumb": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport { useRouter } from \"next/navigation\"\r\nimport * as React from \"react\"\r\nimport { BsThreeDots } from \"react-icons/bs\"\r\nimport { LuChevronRight } from \"react-icons/lu\"\r\n\r\nconst Breadcrumb = React.forwardRef<\r\n  HTMLElement,\r\n  React.ComponentPropsWithoutRef<\"nav\"> & {\r\n    separator?: React.ReactNode\r\n  }\r\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\r\nBreadcrumb.displayName = \"Breadcrumb\"\r\n\r\nconst BreadcrumbList = React.forwardRef<\r\n  HTMLOListElement,\r\n  React.ComponentPropsWithoutRef<\"ol\">\r\n>(({ className, ...props }, ref) => (\r\n  <ol\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nBreadcrumbList.displayName = \"BreadcrumbList\"\r\n\r\nconst BreadcrumbItem = React.forwardRef<\r\n  HTMLLIElement,\r\n  React.ComponentPropsWithoutRef<\"li\">\r\n>(({ className, ...props }, ref) => (\r\n  <li\r\n    ref={ref}\r\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\r\n    {...props}\r\n  />\r\n))\r\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\r\n\r\nconst BreadcrumbLink = React.forwardRef<\r\n  HTMLAnchorElement,\r\n  React.ComponentPropsWithoutRef<\"a\"> & {\r\n    asChild?: boolean\r\n    href?: string\r\n  }\r\n>(({ asChild, className, href, ...props }, ref) => {\r\n  const router = useRouter()\r\n\r\n  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\r\n    if (href && href.startsWith(\"/\")) {\r\n      event.preventDefault()\r\n      router.push(href)\r\n    }\r\n  }\r\n\r\n  const Comp = asChild ? Slot : \"a\"\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      href={href}\r\n      onClick={handleClick}\r\n      className={cn(\"transition-colors hover:text-foreground\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\r\n\r\nconst BreadcrumbPage = React.forwardRef<\r\n  HTMLSpanElement,\r\n  React.ComponentPropsWithoutRef<\"span\">\r\n>(({ className, ...props }, ref) => (\r\n  <span\r\n    ref={ref}\r\n    role=\"link\"\r\n    aria-disabled=\"true\"\r\n    aria-current=\"page\"\r\n    className={cn(\"font-medium text-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\r\n\r\nconst BreadcrumbSeparator = ({\r\n  children,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"span\">) => (\r\n  <span\r\n    role=\"presentation\"\r\n    aria-hidden=\"true\"\r\n    className={cn(\"[&>svg]:size-3.5\", className)}\r\n    {...props}\r\n  >\r\n    {children ?? <LuChevronRight className=\"mt-[2px]\" />}\r\n  </span>\r\n)\r\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\r\n\r\nconst BreadcrumbEllipsis = ({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"span\">) => (\r\n  <span\r\n    role=\"presentation\"\r\n    aria-hidden=\"true\"\r\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\r\n    {...props}\r\n  >\r\n    <BsThreeDots className=\"h-4 w-4\" />\r\n    <span className=\"sr-only\">More</span>\r\n  </span>\r\n)\r\nBreadcrumbEllipsis.displayName = \"BreadcrumbEllipsis\"\r\n\r\nexport {\r\n  Breadcrumb,\r\n  BreadcrumbEllipsis,\r\n  BreadcrumbItem,\r\n  BreadcrumbLink,\r\n  BreadcrumbList,\r\n  BreadcrumbPage,\r\n  BreadcrumbSeparator\r\n}",
    "language": "tsx"
  },
  "@/registry/ui/button-group": {
    "content": "import { Slot } from \"@radix-ui/react-slot\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\n\r\nconst buttonGroupVariants = cva(\r\n    \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\r\n    {\r\n        variants: {\r\n            orientation: {\r\n                horizontal:\r\n                    \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\r\n                vertical:\r\n                    \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            orientation: \"horizontal\",\r\n        },\r\n    }\r\n)\r\n\r\nfunction ButtonGroup({\r\n    className,\r\n    orientation,\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\r\n    return (\r\n        <div\r\n            role=\"group\"\r\n            data-slot=\"button-group\"\r\n            data-orientation={orientation}\r\n            className={cn(buttonGroupVariants({ orientation }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ButtonGroupText({\r\n    className,\r\n    asChild = false,\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n    asChild?: boolean\r\n}) {\r\n    const Comp = asChild ? Slot : \"div\"\r\n\r\n    return (\r\n        <Comp\r\n            className={cn(\r\n                \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ButtonGroupSeparator({\r\n    className,\r\n    orientation = \"vertical\",\r\n    ...props\r\n}: React.ComponentProps<typeof Separator>) {\r\n    return (\r\n        <Separator\r\n            data-slot=\"button-group-separator\"\r\n            orientation={orientation}\r\n            className={cn(\r\n                \"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport {\r\n    ButtonGroup,\r\n    ButtonGroupSeparator,\r\n    ButtonGroupText,\r\n    buttonGroupVariants,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/button": {
    "content": "\"use client\"\r\n\r\nimport { LoadingIcon } from \"@/components/icons/loading-icon\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nconst buttonVariants = cva(\r\n  \"inline-flex items-center transition-all justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:opacity-50 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\r\n        destructive:\r\n          \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\r\n        outline:\r\n          \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\r\n        secondary:\r\n          \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\r\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\r\n        link: \"text-primary underline-offset-4 hover:underline\",\r\n        neural:\r\n          \"bg-secondary/20 text-secondary hover:bg-secondary/30 backdrop-blur-sm\",\r\n      },\r\n      size: {\r\n        default: \"h-10 px-4 py-2\",\r\n        sm: \"h-9 px-3 rounded-md text-xs\",\r\n        lg: \"h-11 px-8 rounded-md\",\r\n        icon: \"h-10 w-10\",\r\n      },\r\n      animation: {\r\n        none: \"\",\r\n        pulse: \"animate-pulse\",\r\n        bounce: \"animate-bounce\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n      animation: \"none\",\r\n    },\r\n  }\r\n)\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n  VariantProps<typeof buttonVariants> {\r\n  isLoading?: boolean\r\n  icon?: React.ReactNode\r\n  iconPosition?: \"left\" | \"right\"\r\n  asChild?: boolean\r\n}\r\n\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    {\r\n      className,\r\n      variant,\r\n      size,\r\n      animation,\r\n      isLoading = false,\r\n      icon,\r\n      iconPosition = \"left\",\r\n      asChild = false,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const Comp = asChild ? Slot : \"button\"\r\n\r\n    const content = (\r\n      <>\r\n        {(isLoading || icon) && iconPosition === \"left\" && (\r\n          <span className=\"mr-1 flex items-center\">\r\n            {isLoading ? <LoadingIcon size={14} /> : icon}\r\n          </span>\r\n        )}\r\n        {children}\r\n        {(isLoading || icon) && iconPosition === \"right\" && (\r\n          <span className=\"ml-1 flex items-center\">\r\n            {isLoading ? <LoadingIcon size={14} /> : icon}\r\n          </span>\r\n        )}\r\n      </>\r\n    )\r\n\r\n    return (\r\n      <Comp\r\n        className={cn(buttonVariants({ variant, size, animation, className }))}\r\n        ref={ref}\r\n        aria-disabled={isLoading || props.disabled}\r\n        {...props}\r\n      >\r\n        {asChild ? React.Children.only(children) : content}\r\n      </Comp>\r\n    )\r\n  }\r\n)\r\n\r\nButton.displayName = \"Button\"\r\n\r\nexport { Button, buttonVariants }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/calendar": {
    "content": "\"use client\"\r\n\r\nimport { buttonVariants } from \"@/components/ui/button\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\r\nimport * as React from \"react\"\r\nimport { DayPicker } from \"react-day-picker\"\r\n\r\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\r\n\r\nfunction Calendar({\r\n  className,\r\n  classNames,\r\n  showOutsideDays = true,\r\n  ...props\r\n}: CalendarProps) {\r\n  return (\r\n    <DayPicker\r\n      showOutsideDays={showOutsideDays}\r\n      className={cn(\"p-3 rounded-2xl border shadow\", className)}\r\n      classNames={{\r\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\r\n        month: \"space-y-4\",\r\n        caption: \"flex justify-center pt-1 relative items-center\",\r\n        caption_label: \"text-sm font-semibold\",\r\n        nav: \"space-x-1 flex items-center\",\r\n        nav_button: cn(\r\n          buttonVariants({ variant: \"outline\" }),\r\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\r\n        ),\r\n        nav_button_previous: \"absolute left-1\",\r\n        nav_button_next: \"absolute right-1 \",\r\n        table: \"w-full border-collapse space-y-1\",\r\n        head_row: \"flex\",\r\n        head_cell:\r\n          \"text-muted-foreground rounded-lg w-8 font-normal text-[0.8rem]\",\r\n        row: \"flex w-full mt-2\",\r\n        cell: cn(\r\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\r\n          props.mode === \"range\"\r\n            ? \"[&: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\"\r\n            : \"[&:has([aria-selected])]:rounded-md\"\r\n        ),\r\n        day: cn(\r\n          buttonVariants({ variant: \"ghost\" }),\r\n          \"h-8 w-8 p-0 rounded-lg font-semibold aria-selected:opacity-100\"\r\n        ),\r\n        day_range_start: \"day-range-start\",\r\n        day_range_end: \"day-range-end\",\r\n        day_selected:\r\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\r\n        day_today: \"bg-accent text-accent-foreground\",\r\n        day_outside:\r\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\r\n        day_disabled: \"text-muted-foreground opacity-50\",\r\n        day_range_middle:\r\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\r\n        day_hidden: \"invisible\",\r\n        ...classNames,\r\n      }}\r\n      components={{\r\n        IconLeft: ({ className, ...props }) => (\r\n          <ChevronLeft\r\n            strokeWidth={2.5}\r\n            className={cn(\"h-5 w-5\", className)}\r\n            {...props}\r\n          />\r\n        ),\r\n        IconRight: ({ className, ...props }) => (\r\n          <ChevronRight\r\n            strokeWidth={2.5}\r\n            className={cn(\"h-4.5 w-4.5\", className)}\r\n            {...props}\r\n          />\r\n        ),\r\n      }}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\nCalendar.displayName = \"Calendar\"\r\n\r\nexport { Calendar }",
    "language": "tsx"
  },
  "@/registry/ui/card": {
    "content": "import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Card = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\r\n      \"rounded-2xl border border-border/60 bg-card/80 backdrop-blur-sm text-card-foreground shadow-sm transition-all hover:shadow-md hover:border-border/80\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nCard.displayName = \"Card\"\r\n\r\nconst CardHeader = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex flex-col space-y-1.5 p-6 pb-4\", className)}\r\n    {...props}\r\n  />\r\n))\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"font-semibold leading-tight tracking-tight text-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"text-sm text-muted-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nconst CardContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div ref={ref} className={cn(\"p-6 pt-0 text-sm leading-relaxed\", className)} {...props} />\r\n))\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    className={cn(\"flex items-center p-6 pt-4 border-t border-border/30\", className)}\r\n    {...props}\r\n  />\r\n))\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/carousel": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport useEmblaCarousel, {\r\n  type UseEmblaCarouselType,\r\n} from \"embla-carousel-react\"\r\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\ntype CarouselApi = UseEmblaCarouselType[1]\r\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\r\ntype CarouselOptions = UseCarouselParameters[0]\r\ntype CarouselPlugin = UseCarouselParameters[1]\r\n\r\ntype CarouselProps = {\r\n  opts?: CarouselOptions\r\n  plugins?: CarouselPlugin\r\n  orientation?: \"horizontal\" | \"vertical\"\r\n  setApi?: (api: CarouselApi) => void\r\n}\r\n\r\ntype CarouselContextProps = {\r\n  carouselRef: ReturnType<typeof useEmblaCarousel>[0]\r\n  api: ReturnType<typeof useEmblaCarousel>[1]\r\n  scrollPrev: () => void\r\n  scrollNext: () => void\r\n  canScrollPrev: boolean\r\n  canScrollNext: boolean\r\n} & CarouselProps\r\n\r\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\r\n\r\nfunction useCarousel() {\r\n  const context = React.useContext(CarouselContext)\r\n\r\n  if (!context) {\r\n    throw new Error(\"useCarousel must be used within a <Carousel />\")\r\n  }\r\n\r\n  return context\r\n}\r\n\r\nconst Carousel = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement> & CarouselProps\r\n>(\r\n  (\r\n    {\r\n      orientation = \"horizontal\",\r\n      opts,\r\n      setApi,\r\n      plugins,\r\n      className,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const [carouselRef, api] = useEmblaCarousel(\r\n      {\r\n        ...opts,\r\n        axis: orientation === \"horizontal\" ? \"x\" : \"y\",\r\n      },\r\n      plugins\r\n    )\r\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\r\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\r\n\r\n    const onSelect = React.useCallback((api: CarouselApi) => {\r\n      if (!api) {\r\n        return\r\n      }\r\n\r\n      setCanScrollPrev(api.canScrollPrev())\r\n      setCanScrollNext(api.canScrollNext())\r\n    }, [])\r\n\r\n    const scrollPrev = React.useCallback(() => {\r\n      api?.scrollPrev()\r\n    }, [api])\r\n\r\n    const scrollNext = React.useCallback(() => {\r\n      api?.scrollNext()\r\n    }, [api])\r\n\r\n    const handleKeyDown = React.useCallback(\r\n      (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n        if (event.key === \"ArrowLeft\") {\r\n          event.preventDefault()\r\n          scrollPrev()\r\n        } else if (event.key === \"ArrowRight\") {\r\n          event.preventDefault()\r\n          scrollNext()\r\n        }\r\n      },\r\n      [scrollPrev, scrollNext]\r\n    )\r\n\r\n    React.useEffect(() => {\r\n      if (!api || !setApi) {\r\n        return\r\n      }\r\n\r\n      setApi(api)\r\n    }, [api, setApi])\r\n\r\n    React.useEffect(() => {\r\n      if (!api) {\r\n        return\r\n      }\r\n\r\n      onSelect(api)\r\n      api.on(\"reInit\", onSelect)\r\n      api.on(\"select\", onSelect)\r\n\r\n      return () => {\r\n        api?.off(\"select\", onSelect)\r\n      }\r\n    }, [api, onSelect])\r\n\r\n    return (\r\n      <CarouselContext.Provider\r\n        value={{\r\n          carouselRef,\r\n          api: api,\r\n          opts,\r\n          orientation:\r\n            orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\r\n          scrollPrev,\r\n          scrollNext,\r\n          canScrollPrev,\r\n          canScrollNext,\r\n        }}\r\n      >\r\n        <div\r\n          ref={ref}\r\n          onKeyDownCapture={handleKeyDown}\r\n          className={cn(\"relative\", className)}\r\n          role=\"region\"\r\n          aria-roledescription=\"carousel\"\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      </CarouselContext.Provider>\r\n    )\r\n  }\r\n)\r\nCarousel.displayName = \"Carousel\"\r\n\r\nconst CarouselContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n  const { carouselRef, orientation } = useCarousel()\r\n\r\n  return (\r\n    <div ref={carouselRef} className=\"overflow-hidden\">\r\n      <div\r\n        ref={ref}\r\n        className={cn(\r\n          \"flex\",\r\n          orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n})\r\nCarouselContent.displayName = \"CarouselContent\"\r\n\r\nconst CarouselItem = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n  const { orientation } = useCarousel()\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"group\"\r\n      aria-roledescription=\"slide\"\r\n      className={cn(\r\n        \"min-w-0 shrink-0 grow-0 basis-full\",\r\n        orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nCarouselItem.displayName = \"CarouselItem\"\r\n\r\nconst CarouselPrevious = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<typeof Button>\r\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\r\n  const { orientation, scrollPrev, canScrollPrev } = useCarousel()\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      variant={variant}\r\n      size={size}\r\n      className={cn(\r\n        \"absolute h-9 w-9 rounded-xl border-border/60 bg-background/80 backdrop-blur-sm shadow-sm transition-all hover:shadow-md hover:bg-background\",\r\n        orientation === \"horizontal\"\r\n          ? \"-left-12 top-1/2 -translate-y-1/2\"\r\n          : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\r\n        className\r\n      )}\r\n      disabled={!canScrollPrev}\r\n      onClick={scrollPrev}\r\n      {...props}\r\n    >\r\n      <ArrowLeft className=\"h-4 w-4\" strokeWidth={2.5} />\r\n      <span className=\"sr-only\">Previous slide</span>\r\n    </Button>\r\n  )\r\n})\r\nCarouselPrevious.displayName = \"CarouselPrevious\"\r\n\r\nconst CarouselNext = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<typeof Button>\r\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\r\n  const { orientation, scrollNext, canScrollNext } = useCarousel()\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      variant={variant}\r\n      size={size}\r\n      className={cn(\r\n        \"absolute h-9 w-9 rounded-xl border-border/60 bg-background/80 backdrop-blur-sm shadow-sm transition-all hover:shadow-md hover:bg-background\",\r\n        orientation === \"horizontal\"\r\n          ? \"-right-12 top-1/2 -translate-y-1/2\"\r\n          : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\r\n        className\r\n      )}\r\n      disabled={!canScrollNext}\r\n      onClick={scrollNext}\r\n      {...props}\r\n    >\r\n      <ArrowRight className=\"h-4 w-4\" strokeWidth={2.5} />\r\n      <span className=\"sr-only\">Next slide</span>\r\n    </Button>\r\n  )\r\n})\r\nCarouselNext.displayName = \"CarouselNext\"\r\n\r\nexport {\r\n  Carousel,\r\n  CarouselContent,\r\n  CarouselItem, CarouselNext, CarouselPrevious, type CarouselApi\r\n}\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/chart": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as RechartsPrimitive from \"recharts\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const\r\n\r\nexport type ChartConfig = {\r\n  [k in string]: {\r\n    label?: React.ReactNode\r\n    icon?: React.ComponentType\r\n  } & (\r\n    | { color?: string; theme?: never }\r\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\r\n  )\r\n}\r\n\r\ntype ChartContextProps = {\r\n  config: ChartConfig\r\n}\r\n\r\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\r\n\r\nfunction useChart() {\r\n  const context = React.useContext(ChartContext)\r\n\r\n  if (!context) {\r\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\r\n  }\r\n\r\n  return context\r\n}\r\n\r\nconst ChartContainer = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    config: ChartConfig\r\n    children: React.ComponentProps<\r\n      typeof RechartsPrimitive.ResponsiveContainer\r\n    >[\"children\"]\r\n  }\r\n>(({ id, className, children, config, ...props }, ref) => {\r\n  const uniqueId = React.useId()\r\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\r\n\r\n  return (\r\n    <ChartContext.Provider value={{ config }}>\r\n      <div\r\n        data-chart={chartId}\r\n        ref={ref}\r\n        className={cn(\r\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\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <ChartStyle id={chartId} config={config} />\r\n        <RechartsPrimitive.ResponsiveContainer>\r\n          {children}\r\n        </RechartsPrimitive.ResponsiveContainer>\r\n      </div>\r\n    </ChartContext.Provider>\r\n  )\r\n})\r\nChartContainer.displayName = \"Chart\"\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n  const colorConfig = Object.entries(config).filter(\r\n    ([, config]) => config.theme || config.color\r\n  )\r\n\r\n  if (!colorConfig.length) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <style\r\n      dangerouslySetInnerHTML={{\r\n        __html: Object.entries(THEMES)\r\n          .map(\r\n            ([theme, prefix]) => `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n  .map(([key, itemConfig]) => {\r\n    const color =\r\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\r\n      itemConfig.color\r\n    return color ? `  --color-${key}: ${color};` : null\r\n  })\r\n  .join(\"\\n\")}\r\n}\r\n`\r\n          )\r\n          .join(\"\\n\"),\r\n      }}\r\n    />\r\n  )\r\n}\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip\r\n\r\nconst ChartTooltipContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\r\n    React.ComponentProps<\"div\"> & {\r\n      hideLabel?: boolean\r\n      hideIndicator?: boolean\r\n      indicator?: \"line\" | \"dot\" | \"dashed\"\r\n      nameKey?: string\r\n      labelKey?: string\r\n    }\r\n>(\r\n  (\r\n    {\r\n      active,\r\n      payload,\r\n      className,\r\n      indicator = \"dot\",\r\n      hideLabel = false,\r\n      hideIndicator = false,\r\n      label,\r\n      labelFormatter,\r\n      labelClassName,\r\n      formatter,\r\n      color,\r\n      nameKey,\r\n      labelKey,\r\n    },\r\n    ref\r\n  ) => {\r\n    const { config } = useChart()\r\n\r\n    const tooltipLabel = React.useMemo(() => {\r\n      if (hideLabel || !payload?.length) {\r\n        return null\r\n      }\r\n\r\n      const [item] = payload\r\n      const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\r\n      const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n      const value =\r\n        !labelKey && typeof label === \"string\"\r\n          ? config[label as keyof typeof config]?.label || label\r\n          : itemConfig?.label\r\n\r\n      if (labelFormatter) {\r\n        return (\r\n          <div className={cn(\"font-medium\", labelClassName)}>\r\n            {labelFormatter(value, payload)}\r\n          </div>\r\n        )\r\n      }\r\n\r\n      if (!value) {\r\n        return null\r\n      }\r\n\r\n      return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\r\n    }, [\r\n      label,\r\n      labelFormatter,\r\n      payload,\r\n      hideLabel,\r\n      labelClassName,\r\n      config,\r\n      labelKey,\r\n    ])\r\n\r\n    if (!active || !payload?.length) {\r\n      return null\r\n    }\r\n\r\n    const nestLabel = payload.length === 1 && indicator !== \"dot\"\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(\r\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\",\r\n          className\r\n        )}\r\n      >\r\n        {!nestLabel ? tooltipLabel : null}\r\n        <div className=\"grid gap-1.5\">\r\n          {payload.map((item, index) => {\r\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\r\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n            const indicatorColor = color || item.payload.fill || item.color\r\n\r\n            return (\r\n              <div\r\n                key={item.dataKey}\r\n                className={cn(\r\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\r\n                  indicator === \"dot\" && \"items-center\"\r\n                )}\r\n              >\r\n                {formatter && item?.value !== undefined && item.name ? (\r\n                  formatter(item.value, item.name, item, index, item.payload)\r\n                ) : (\r\n                  <>\r\n                    {itemConfig?.icon ? (\r\n                      <itemConfig.icon />\r\n                    ) : (\r\n                      !hideIndicator && (\r\n                        <div\r\n                          className={cn(\r\n                            \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\r\n                            {\r\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\r\n                              \"w-1\": indicator === \"line\",\r\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\r\n                                indicator === \"dashed\",\r\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\r\n                            }\r\n                          )}\r\n                          style={\r\n                            {\r\n                              \"--color-bg\": indicatorColor,\r\n                              \"--color-border\": indicatorColor,\r\n                            } as React.CSSProperties\r\n                          }\r\n                        />\r\n                      )\r\n                    )}\r\n                    <div\r\n                      className={cn(\r\n                        \"flex flex-1 justify-between leading-none\",\r\n                        nestLabel ? \"items-end\" : \"items-center\"\r\n                      )}\r\n                    >\r\n                      <div className=\"grid gap-1.5\">\r\n                        {nestLabel ? tooltipLabel : null}\r\n                        <span className=\"text-muted-foreground\">\r\n                          {itemConfig?.label || item.name}\r\n                        </span>\r\n                      </div>\r\n                      {item.value && (\r\n                        <span className=\"font-mono font-medium tabular-nums text-foreground\">\r\n                          {item.value.toLocaleString()}\r\n                        </span>\r\n                      )}\r\n                    </div>\r\n                  </>\r\n                )}\r\n              </div>\r\n            )\r\n          })}\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n)\r\nChartTooltipContent.displayName = \"ChartTooltip\"\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend\r\n\r\nconst ChartLegendContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> &\r\n    Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\r\n      hideIcon?: boolean\r\n      nameKey?: string\r\n    }\r\n>(\r\n  (\r\n    { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\r\n    ref\r\n  ) => {\r\n    const { config } = useChart()\r\n\r\n    if (!payload?.length) {\r\n      return null\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(\r\n          \"flex items-center justify-center gap-4\",\r\n          verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\r\n          className\r\n        )}\r\n      >\r\n        {payload.map((item) => {\r\n          const key = `${nameKey || item.dataKey || \"value\"}`\r\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n\r\n          return (\r\n            <div\r\n              key={item.value}\r\n              className={cn(\r\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\r\n              )}\r\n            >\r\n              {itemConfig?.icon && !hideIcon ? (\r\n                <itemConfig.icon />\r\n              ) : (\r\n                <div\r\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\r\n                  style={{\r\n                    backgroundColor: item.color,\r\n                  }}\r\n                />\r\n              )}\r\n              {itemConfig?.label}\r\n            </div>\r\n          )\r\n        })}\r\n      </div>\r\n    )\r\n  }\r\n)\r\nChartLegendContent.displayName = \"ChartLegend\"\r\n\r\n// Helper to extract item config from a payload.\r\nfunction getPayloadConfigFromPayload(\r\n  config: ChartConfig,\r\n  payload: unknown,\r\n  key: string\r\n) {\r\n  if (typeof payload !== \"object\" || payload === null) {\r\n    return undefined\r\n  }\r\n\r\n  const payloadPayload =\r\n    \"payload\" in payload &&\r\n    typeof payload.payload === \"object\" &&\r\n    payload.payload !== null\r\n      ? payload.payload\r\n      : undefined\r\n\r\n  let configLabelKey: string = key\r\n\r\n  if (\r\n    key in payload &&\r\n    typeof payload[key as keyof typeof payload] === \"string\"\r\n  ) {\r\n    configLabelKey = payload[key as keyof typeof payload] as string\r\n  } else if (\r\n    payloadPayload &&\r\n    key in payloadPayload &&\r\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n  ) {\r\n    configLabelKey = payloadPayload[\r\n      key as keyof typeof payloadPayload\r\n    ] as string\r\n  }\r\n\r\n  return configLabelKey in config\r\n    ? config[configLabelKey]\r\n    : config[key as keyof typeof config]\r\n}\r\n\r\nexport {\r\n  ChartContainer,\r\n  ChartTooltip,\r\n  ChartTooltipContent,\r\n  ChartLegend,\r\n  ChartLegendContent,\r\n  ChartStyle,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/checkbox": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\r\nimport { Check } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Checkbox = React.forwardRef<\r\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <CheckboxPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\r\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <CheckboxPrimitive.Indicator\r\n      className={cn(\"flex items-center justify-center text-current\")}\r\n    >\r\n      <Check className=\"h-4 w-4\" />\r\n    </CheckboxPrimitive.Indicator>\r\n  </CheckboxPrimitive.Root>\r\n))\r\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\r\n\r\nexport { Checkbox }",
    "language": "tsx"
  },
  "@/registry/ui/collapsible": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\r\nimport * as React from \"react\"\r\n\r\nconst Collapsible = CollapsiblePrimitive.Root\r\n\r\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\r\n\r\nconst CollapsibleContent = React.forwardRef<\r\n    React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,\r\n    React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>\r\n>(({ className, ...props }, ref) => (\r\n    <CollapsiblePrimitive.CollapsibleContent\r\n        ref={ref}\r\n        className={cn(\r\n            \"overflow-hidden transition-all duration-200 ease-out data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\",\r\n            className\r\n        )}\r\n        {...props}\r\n    />\r\n))\r\nCollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName\r\n\r\nexport { Collapsible, CollapsibleContent, CollapsibleTrigger }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/command": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\r\nimport { Command as CommandPrimitive } from \"cmdk\"\r\nimport { Search } from \"lucide-react\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Dialog, DialogContent } from \"@/components/ui/dialog\"\r\n\r\nconst Command = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\r\n>(({ className, ...props }, ref) => (\r\n  <CommandPrimitive\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nCommand.displayName = CommandPrimitive.displayName\r\n\r\nconst CommandDialog = ({ children, ...props }: DialogProps) => {\r\n  return (\r\n    <Dialog {...props}>\r\n      <DialogContent className=\"overflow-hidden p-0\">\r\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\">\r\n          {children}\r\n        </Command>\r\n      </DialogContent>\r\n    </Dialog>\r\n  )\r\n}\r\n\r\nconst CommandInput = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive.Input>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\r\n>(({ className, ...props }, ref) => (\r\n  <div className=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\r\n    <Search className=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\r\n    <CommandPrimitive.Input\r\n      ref={ref}\r\n      className={cn(\r\n        \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </div>\r\n))\r\n\r\nCommandInput.displayName = CommandPrimitive.Input.displayName\r\n\r\nconst CommandList = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive.List>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n  <CommandPrimitive.List\r\n    ref={ref}\r\n    className={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\r\n    {...props}\r\n  />\r\n))\r\n\r\nCommandList.displayName = CommandPrimitive.List.displayName\r\n\r\nconst CommandEmpty = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive.Empty>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\r\n>((props, ref) => (\r\n  <CommandPrimitive.Empty\r\n    ref={ref}\r\n    className=\"py-6 text-center text-sm\"\r\n    {...props}\r\n  />\r\n))\r\n\r\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\r\n\r\nconst CommandGroup = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive.Group>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\r\n>(({ className, ...props }, ref) => (\r\n  <CommandPrimitive.Group\r\n    ref={ref}\r\n    className={cn(\r\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\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\n\r\nCommandGroup.displayName = CommandPrimitive.Group.displayName\r\n\r\nconst CommandSeparator = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <CommandPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 h-px bg-border\", className)}\r\n    {...props}\r\n  />\r\n))\r\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\r\n\r\nconst CommandItem = React.forwardRef<\r\n  React.ElementRef<typeof CommandPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\r\n>(({ className, ...props }, ref) => (\r\n  <CommandPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\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\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\n\r\nCommandItem.displayName = CommandPrimitive.Item.displayName\r\n\r\nconst CommandShortcut = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"ml-auto text-xs tracking-widest text-muted-foreground\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\nCommandShortcut.displayName = \"CommandShortcut\"\r\n\r\nexport {\r\n  Command,\r\n  CommandDialog,\r\n  CommandInput,\r\n  CommandList,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandItem,\r\n  CommandShortcut,\r\n  CommandSeparator,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/context-menu": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\r\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ContextMenu = ContextMenuPrimitive.Root\r\n\r\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\r\n\r\nconst ContextMenuGroup = ContextMenuPrimitive.Group\r\n\r\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\r\n\r\nconst ContextMenuSub = ContextMenuPrimitive.Sub\r\n\r\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\r\n\r\nconst ContextMenuSubTrigger = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n  <ContextMenuPrimitive.SubTrigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all duration-200 hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n    <ChevronRight className=\"ml-auto h-4 w-4 opacity-60\" />\r\n  </ContextMenuPrimitive.SubTrigger>\r\n))\r\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\r\n\r\nconst ContextMenuSubContent = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Portal>\r\n    <ContextMenuPrimitive.SubContent\r\n      ref={ref}\r\n      className={cn(\r\n        \"z-[100] min-w-[8rem] overflow-hidden rounded-2xl border border-border/60 bg-popover/80 backdrop-blur-md p-1.5 text-popover-foreground shadow-lg\",\r\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\r\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\r\n        \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n        \"origin-[--radix-context-menu-content-transform-origin]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </ContextMenuPrimitive.Portal>\r\n))\r\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\r\n\r\nconst ContextMenuContent = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\r\n>(({ className, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Portal>\r\n    <ContextMenuPrimitive.Content\r\n      ref={ref}\r\n      className={cn(\r\n        \"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-2xl border border-border/60 bg-popover/80 backdrop-blur-md p-1.5 text-popover-foreground shadow-lg\",\r\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\r\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\r\n        \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n        \"origin-[--radix-context-menu-content-transform-origin]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </ContextMenuPrimitive.Portal>\r\n))\r\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\r\n\r\nconst ContextMenuItem = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-all duration-200 hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\r\n\r\nconst ContextMenuCheckboxItem = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n  <ContextMenuPrimitive.CheckboxItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2.5 text-sm outline-none transition-all duration-200 hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    checked={checked}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2.5 flex h-4 w-4 items-center justify-center\">\r\n      <ContextMenuPrimitive.ItemIndicator>\r\n        <Check className=\"h-3.5 w-3.5\" />\r\n      </ContextMenuPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </ContextMenuPrimitive.CheckboxItem>\r\n))\r\nContextMenuCheckboxItem.displayName =\r\n  ContextMenuPrimitive.CheckboxItem.displayName\r\n\r\nconst ContextMenuRadioItem = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n  <ContextMenuPrimitive.RadioItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2.5 text-sm outline-none transition-all duration-200 hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2.5 flex h-4 w-4 items-center justify-center\">\r\n      <ContextMenuPrimitive.ItemIndicator>\r\n        <Circle className=\"h-2 w-2 fill-current\" />\r\n      </ContextMenuPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </ContextMenuPrimitive.RadioItem>\r\n))\r\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\r\n\r\nconst ContextMenuLabel = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.Label>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Label\r\n    ref={ref}\r\n    className={cn(\r\n      \"px-2 py-1.5 text-sm font-semibold text-foreground\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\r\n\r\nconst ContextMenuSeparator = React.forwardRef<\r\n  React.ElementRef<typeof ContextMenuPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <ContextMenuPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 my-1.5 h-px bg-border/40\", className)}\r\n    {...props}\r\n  />\r\n))\r\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\r\n\r\nconst ContextMenuShortcut = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"ml-auto text-xs font-medium tracking-wider text-muted-foreground/70\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\r\n\r\nexport {\r\n  ContextMenu,\r\n  ContextMenuTrigger,\r\n  ContextMenuContent,\r\n  ContextMenuItem,\r\n  ContextMenuCheckboxItem,\r\n  ContextMenuRadioItem,\r\n  ContextMenuLabel,\r\n  ContextMenuSeparator,\r\n  ContextMenuShortcut,\r\n  ContextMenuGroup,\r\n  ContextMenuPortal,\r\n  ContextMenuSub,\r\n  ContextMenuSubContent,\r\n  ContextMenuSubTrigger,\r\n  ContextMenuRadioGroup,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/custom-tabs": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\r\nimport { motion } from \"framer-motion\"\r\nimport * as React from \"react\"\r\n\r\nconst Tabs = TabsPrimitive.Root\r\n\r\nconst TabsList = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.List>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\r\n>(({ className, ...props }, ref) => {\r\n  const [activeIndex, setActiveIndex] = React.useState(0)\r\n  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([])\r\n  const [activeStyle, setActiveStyle] = React.useState({\r\n    left: \"0px\",\r\n    width: \"0px\",\r\n  })\r\n\r\n  React.useEffect(() => {\r\n    const activeElement = tabRefs.current[activeIndex]\r\n    if (activeElement) {\r\n      const { offsetLeft, offsetWidth } = activeElement\r\n      setActiveStyle({\r\n        left: `${offsetLeft}px`,\r\n        width: `${offsetWidth}px`,\r\n      })\r\n    }\r\n  }, [activeIndex])\r\n\r\n  return (\r\n    <TabsPrimitive.List\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex items-center space-x-2 overflow-hidden border-b border-muted\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <motion.div\r\n        className=\"absolute bottom-0 h-[2px] bg-primary\"\r\n        animate={activeStyle}\r\n        transition={{ duration: 0.1, ease: \"easeOut\" }}\r\n      />\r\n      {React.Children.map(props.children, (child, index) =>\r\n        React.isValidElement(child)\r\n          ? React.cloneElement(child, {\r\n            ref: (el: HTMLButtonElement) => (tabRefs.current[index] = el),\r\n            onClick: () => setActiveIndex(index),\r\n            isActive: index === activeIndex,\r\n          })\r\n          : child\r\n      )}\r\n    </TabsPrimitive.List>\r\n  )\r\n})\r\nTabsList.displayName = TabsPrimitive.List.displayName\r\n\r\nconst TabsTrigger = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {\r\n    isActive?: boolean\r\n  }\r\n>(({ className, isActive, ...props }, ref) => (\r\n  <TabsPrimitive.Trigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative px-4 py-2 text-sm font-medium whitespace-nowrap transition-all\",\r\n      isActive ? \"text-foreground font-semibold\" : \"text-muted-foreground \",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\r\n\r\nconst TabsContent = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\r\n>(({ className, ...props }, ref) => (\r\n  <TabsPrimitive.Content\r\n    ref={ref}\r\n    className={cn(\"mt-2 relative overflow-hidden\", className)}\r\n    {...props}\r\n  >\r\n    {props.children}\r\n  </TabsPrimitive.Content>\r\n))\r\nTabsContent.displayName = TabsPrimitive.Content.displayName\r\n\r\nexport { Tabs, TabsContent, TabsList, TabsTrigger }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/dialog": {
    "content": "\"use client\"\r\n\r\nimport { buttonVariants } from \"@/components/ui/button\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nconst Dialog = DialogPrimitive.Root\r\n\r\nconst DialogTrigger = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n  <DialogPrimitive.Trigger\r\n    ref={ref}\r\n    className={cn(\"focus:outline-none\", className)}\r\n    {...props}\r\n  >\r\n    {children}\r\n  </DialogPrimitive.Trigger>\r\n))\r\nDialogTrigger.displayName = DialogPrimitive.Trigger.displayName\r\n\r\nconst DialogPortal = DialogPrimitive.Portal\r\n\r\nconst DialogClose = DialogPrimitive.Close\r\n\r\nconst DialogOverlay = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <DialogPrimitive.Overlay\r\n    ref={ref}\r\n    className={cn(\r\n      \"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm transition\",\r\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\r\n\r\nconst dialogContentVariants = cva(\r\n  \"fixed z-50 grid max-w-md gap-4 backdrop-blur-sm border-border/90 bg-background 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  lg:w-full w-[92%] max-w-md\",\r\n  {\r\n    variants: {\r\n      position: {\r\n        default:\r\n          \"left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] 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%]\",\r\n        top: \"left-[50%] top-[5%] translate-x-[-50%] translate-y-[30%] data-[state=closed]:slide-out-to-top-0 data-[state=open]:slide-in-from-top-0 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] \",\r\n        bottom:\r\n          \"left-[50%] bottom-[5%] translate-x-[-50%] translate-y-[-30%] data-[state=closed]:slide-out-to-bottom-0 data-[state=open]:slide-in-from-bottom-0 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-bottom-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] \",\r\n      },\r\n      appearance: {\r\n        default: \"bg-white/95 dark:bg-neutral-900\",\r\n        destructive: \"bg-white dark:bg-neutral-900\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      appearance: \"default\",\r\n      position: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nexport interface DialogContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\r\n  VariantProps<typeof dialogContentVariants> {\r\n  closeOnClickOutside?: boolean\r\n}\r\n\r\nconst DialogContent = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Content>,\r\n  DialogContentProps\r\n>(\r\n  (\r\n    {\r\n      className,\r\n      appearance,\r\n      position = \"default\",\r\n      closeOnClickOutside = true,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => (\r\n    <DialogPortal>\r\n      <DialogOverlay\r\n        onClick={closeOnClickOutside ? undefined : (e) => e.stopPropagation()}\r\n      />\r\n      <DialogPrimitive.Content\r\n        ref={ref}\r\n        className={cn(\r\n          dialogContentVariants({ appearance, position }),\r\n          className,\r\n          \"p-6 rounded-2xl\"\r\n        )}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </DialogPrimitive.Content>\r\n    </DialogPortal>\r\n  )\r\n)\r\n\r\nDialogContent.displayName = DialogPrimitive.Content.displayName\r\n\r\nconst DialogHeader = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\r\n      \"flex flex-col space-y-2 text-center sm:text-left\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n)\r\nDialogHeader.displayName = \"DialogHeader\"\r\n\r\nconst DialogFooter = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\r\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n)\r\nDialogFooter.displayName = \"DialogFooter\"\r\n\r\nconst DialogTitle = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Title>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n  <DialogPrimitive.Title\r\n    ref={ref}\r\n    className={cn(\"text-lg font-bold\", className)}\r\n    {...props}\r\n  />\r\n))\r\nDialogTitle.displayName = DialogPrimitive.Title.displayName\r\n\r\nconst DialogDescription = React.forwardRef<\r\n  React.ElementRef<typeof DialogPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n  <DialogPrimitive.Description\r\n    ref={ref}\r\n    className={cn(\"text-sm text-muted-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nDialogDescription.displayName = DialogPrimitive.Description.displayName\r\n\r\nconst DialogAction = React.forwardRef<\r\n  React.ElementRef<typeof DialogClose>,\r\n  React.ComponentPropsWithoutRef<typeof DialogClose> & {\r\n    variant?: VariantProps<typeof buttonVariants>[\"variant\"]\r\n    size?: VariantProps<typeof buttonVariants>[\"size\"]\r\n  }\r\n>(({ className, variant = \"default\", size = \"default\", ...props }, ref) => (\r\n  <DialogClose\r\n    ref={ref}\r\n    className={cn(buttonVariants({ variant, size }), className)}\r\n    {...props}\r\n  />\r\n))\r\nDialogAction.displayName = \"DialogAction\"\r\n\r\nconst DialogCancel = React.forwardRef<\r\n  React.ElementRef<typeof DialogClose>,\r\n  React.ComponentPropsWithoutRef<typeof DialogClose> & {\r\n    variant?: VariantProps<typeof buttonVariants>[\"variant\"]\r\n    size?: VariantProps<typeof buttonVariants>[\"size\"]\r\n  }\r\n>(({ className, variant = \"outline\", size = \"default\", ...props }, ref) => (\r\n  <DialogClose\r\n    ref={ref}\r\n    className={cn(buttonVariants({ variant, size }), \"mt-2 sm:mt-0\", className)}\r\n    {...props}\r\n  />\r\n))\r\nDialogCancel.displayName = \"DialogCancel\"\r\n\r\nexport {\r\n  Dialog,\r\n  DialogAction,\r\n  DialogCancel,\r\n  DialogClose,\r\n  DialogContent,\r\n  dialogContentVariants,\r\n  DialogDescription,\r\n  DialogFooter,\r\n  DialogHeader,\r\n  DialogOverlay,\r\n  DialogPortal,\r\n  DialogTitle,\r\n  DialogTrigger\r\n}",
    "language": "tsx"
  },
  "@/registry/ui/drawer": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as React from \"react\"\r\nimport { Drawer as DrawerPrimitive } from \"vaul\"\r\n\r\nconst Drawer = ({\r\n  shouldScaleBackground = true,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (\r\n  <DrawerPrimitive.Root\r\n    shouldScaleBackground={shouldScaleBackground}\r\n    {...props}\r\n  />\r\n)\r\nDrawer.displayName = \"Drawer\"\r\n\r\nconst DrawerTrigger = DrawerPrimitive.Trigger\r\n\r\nconst DrawerPortal = DrawerPrimitive.Portal\r\n\r\nconst DrawerClose = DrawerPrimitive.Close\r\n\r\nconst DrawerOverlay = React.forwardRef<\r\n  React.ElementRef<typeof DrawerPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <DrawerPrimitive.Overlay\r\n    ref={ref}\r\n    className={cn(\"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm\", className)}\r\n    {...props}\r\n  />\r\n))\r\nDrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName\r\n\r\nconst DrawerContent = React.forwardRef<\r\n  React.ElementRef<typeof DrawerPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {\r\n    description?: string\r\n  }\r\n>(({ className, children, description, ...props }, ref) => (\r\n  <DrawerPortal>\r\n    <DrawerOverlay />\r\n    <DrawerPrimitive.Content\r\n      ref={ref}\r\n      className={cn(\r\n        \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-2xl bg-background\",\r\n        className\r\n      )}\r\n      aria-describedby={description ? \"drawer-description\" : undefined}\r\n      {...props}\r\n    >\r\n      <div className=\"mx-auto mt-4 w-[100px] !min-h-[4px] bg-muted rounded-full \" />\r\n      {description && (\r\n        <div id=\"drawer-description\" className=\"sr-only\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {children}\r\n    </DrawerPrimitive.Content>\r\n  </DrawerPortal>\r\n))\r\nDrawerContent.displayName = \"DrawerContent\"\r\n\r\nconst DrawerHeader = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\r\n    {...props}\r\n  />\r\n)\r\nDrawerHeader.displayName = \"DrawerHeader\"\r\n\r\nconst DrawerFooter = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\r\n    {...props}\r\n  />\r\n)\r\nDrawerFooter.displayName = \"DrawerFooter\"\r\n\r\nconst DrawerTitle = React.forwardRef<\r\n  React.ElementRef<typeof DrawerPrimitive.Title>,\r\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n  <DrawerPrimitive.Title\r\n    ref={ref}\r\n    className={cn(\r\n      \"text-lg font-semibold leading-none tracking-tight\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nDrawerTitle.displayName = DrawerPrimitive.Title.displayName\r\n\r\nconst DrawerDescription = React.forwardRef<\r\n  React.ElementRef<typeof DrawerPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n  <DrawerPrimitive.Description\r\n    ref={ref}\r\n    className={cn(\"text-sm text-muted-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nDrawerDescription.displayName = DrawerPrimitive.Description.displayName\r\n\r\nexport {\r\n  Drawer,\r\n  DrawerClose,\r\n  DrawerContent,\r\n  DrawerDescription,\r\n  DrawerFooter,\r\n  DrawerHeader,\r\n  DrawerOverlay,\r\n  DrawerPortal,\r\n  DrawerTitle,\r\n  DrawerTrigger\r\n}\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/dropdown-menu": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\r\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst DropdownMenu = DropdownMenuPrimitive.Root\r\n\r\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\r\n\r\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\r\n\r\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\r\n\r\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\r\n\r\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\r\n\r\nconst DropdownMenuSubTrigger = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.SubTrigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n    <ChevronRight className=\"ml-auto\" />\r\n  </DropdownMenuPrimitive.SubTrigger>\r\n))\r\nDropdownMenuSubTrigger.displayName =\r\n  DropdownMenuPrimitive.SubTrigger.displayName\r\n\r\nconst DropdownMenuSubContent = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.SubContent\r\n    ref={ref}\r\n    className={cn(\r\n      \"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nDropdownMenuSubContent.displayName =\r\n  DropdownMenuPrimitive.SubContent.displayName\r\n\r\nconst DropdownMenuContent = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\r\n>(({ className, sideOffset = 4, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.Portal>\r\n    <DropdownMenuPrimitive.Content\r\n      ref={ref}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\",\r\n        \"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 origin-[--radix-dropdown-menu-content-transform-origin]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </DropdownMenuPrimitive.Portal>\r\n))\r\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\r\n\r\nconst DropdownMenuItem = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\r\n\r\nconst DropdownMenuCheckboxItem = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.CheckboxItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    checked={checked}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <DropdownMenuPrimitive.ItemIndicator>\r\n        <Check className=\"h-4 w-4\" />\r\n      </DropdownMenuPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </DropdownMenuPrimitive.CheckboxItem>\r\n))\r\nDropdownMenuCheckboxItem.displayName =\r\n  DropdownMenuPrimitive.CheckboxItem.displayName\r\n\r\nconst DropdownMenuRadioItem = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.RadioItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <DropdownMenuPrimitive.ItemIndicator>\r\n        <Circle className=\"h-2 w-2 fill-current\" />\r\n      </DropdownMenuPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </DropdownMenuPrimitive.RadioItem>\r\n))\r\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\r\n\r\nconst DropdownMenuLabel = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.Label\r\n    ref={ref}\r\n    className={cn(\r\n      \"px-2 py-1.5 text-sm font-semibold\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\r\n\r\nconst DropdownMenuSeparator = React.forwardRef<\r\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <DropdownMenuPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\r\n    {...props}\r\n  />\r\n))\r\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\r\n\r\nconst DropdownMenuShortcut = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n  return (\r\n    <span\r\n      className={cn(\"ml-auto text-xs tracking-widest opacity-60\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\r\n\r\nexport {\r\n  DropdownMenu,\r\n  DropdownMenuTrigger,\r\n  DropdownMenuContent,\r\n  DropdownMenuItem,\r\n  DropdownMenuCheckboxItem,\r\n  DropdownMenuRadioItem,\r\n  DropdownMenuLabel,\r\n  DropdownMenuSeparator,\r\n  DropdownMenuShortcut,\r\n  DropdownMenuGroup,\r\n  DropdownMenuPortal,\r\n  DropdownMenuSub,\r\n  DropdownMenuSubContent,\r\n  DropdownMenuSubTrigger,\r\n  DropdownMenuRadioGroup,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/empty": {
    "content": "import { cn } from \"@/lib/utils\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"empty\"\r\n            className={cn(\r\n                \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"empty-header\"\r\n            className={cn(\r\n                \"flex max-w-sm flex-col items-center gap-2 text-center\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst emptyMediaVariants = cva(\r\n    \"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"bg-transparent\",\r\n                icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\nfunction EmptyMedia({\r\n    className,\r\n    variant = \"default\",\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\r\n    return (\r\n        <div\r\n            data-slot=\"empty-icon\"\r\n            data-variant={variant}\r\n            className={cn(emptyMediaVariants({ variant, className }))}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"empty-title\"\r\n            className={cn(\"text-lg font-medium tracking-tight\", className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"empty-description\"\r\n            className={cn(\r\n                \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"empty-content\"\r\n            className={cn(\r\n                \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport {\r\n    Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle\r\n}\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/field": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Label } from \"@/components/ui/label\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { useMemo } from \"react\"\r\n\r\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\r\n    return (\r\n        <fieldset\r\n            data-slot=\"field-set\"\r\n            className={cn(\r\n                \"flex flex-col gap-6\",\r\n                \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldLegend({\r\n    className,\r\n    variant = \"legend\",\r\n    ...props\r\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\r\n    return (\r\n        <legend\r\n            data-slot=\"field-legend\"\r\n            data-variant={variant}\r\n            className={cn(\r\n                \"mb-3 font-medium\",\r\n                \"data-[variant=legend]:text-base\",\r\n                \"data-[variant=label]:text-sm\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"field-group\"\r\n            className={cn(\r\n                \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst fieldVariants = cva(\r\n    \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\r\n    {\r\n        variants: {\r\n            orientation: {\r\n                vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\r\n                horizontal: [\r\n                    \"flex-row items-center\",\r\n                    \"[&>[data-slot=field-label]]:flex-auto\",\r\n                    \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\r\n                ],\r\n                responsive: [\r\n                    \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\r\n                    \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\r\n                    \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\r\n                ],\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            orientation: \"vertical\",\r\n        },\r\n    }\r\n)\r\n\r\nfunction Field({\r\n    className,\r\n    orientation = \"vertical\",\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\r\n    return (\r\n        <div\r\n            role=\"group\"\r\n            data-slot=\"field\"\r\n            data-orientation={orientation}\r\n            className={cn(fieldVariants({ orientation }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"field-content\"\r\n            className={cn(\r\n                \"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldLabel({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<typeof Label>) {\r\n    return (\r\n        <Label\r\n            data-slot=\"field-label\"\r\n            className={cn(\r\n                \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\r\n                \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\r\n                \"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"field-label\"\r\n            className={cn(\r\n                \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n    return (\r\n        <p\r\n            data-slot=\"field-description\"\r\n            className={cn(\r\n                \"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\r\n                \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\r\n                \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction FieldSeparator({\r\n    children,\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n    children?: React.ReactNode\r\n}) {\r\n    return (\r\n        <div\r\n            data-slot=\"field-separator\"\r\n            data-content={!!children}\r\n            className={cn(\r\n                \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            <Separator className=\"absolute inset-0 top-1/2\" />\r\n            {children && (\r\n                <span\r\n                    className=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\r\n                    data-slot=\"field-separator-content\"\r\n                >\r\n                    {children}\r\n                </span>\r\n            )}\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction FieldError({\r\n    className,\r\n    children,\r\n    errors,\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n    errors?: Array<{ message?: string } | undefined>\r\n}) {\r\n    const content = useMemo(() => {\r\n        if (children) {\r\n            return children\r\n        }\r\n\r\n        if (!errors?.length) {\r\n            return null\r\n        }\r\n\r\n        const uniqueErrors = [\r\n            ...new Map(errors.map((error) => [error?.message, error])).values(),\r\n        ]\r\n\r\n        if (uniqueErrors?.length == 1) {\r\n            return uniqueErrors[0]?.message\r\n        }\r\n\r\n        return (\r\n            <ul className=\"ml-4 flex list-disc flex-col gap-1\">\r\n                {uniqueErrors.map(\r\n                    (error, index) =>\r\n                        error?.message && <li key={index}>{error.message}</li>\r\n                )}\r\n            </ul>\r\n        )\r\n    }, [children, errors])\r\n\r\n    if (!content) {\r\n        return null\r\n    }\r\n\r\n    return (\r\n        <div\r\n            role=\"alert\"\r\n            data-slot=\"field-error\"\r\n            className={cn(\"text-destructive text-sm font-normal\", className)}\r\n            {...props}\r\n        >\r\n            {content}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport {\r\n    Field, FieldContent, FieldDescription,\r\n    FieldError,\r\n    FieldGroup, FieldLabel, FieldLegend,\r\n    FieldSeparator,\r\n    FieldSet, FieldTitle\r\n}\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/FolderTreeComponent": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronRight, File, Folder, FolderOpen } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\ninterface FileItem {\r\n  id: string\r\n  name: string\r\n  type: \"file\" | \"folder\"\r\n  path?: string\r\n  items?: FileItem[]\r\n}\r\n\r\ninterface FileExplorerNavProps {\r\n  items: FileItem[]\r\n}\r\n\r\nexport function FolderTreeComponent({ items }: FileExplorerNavProps) {\r\n  const [openFolders, setOpenFolders] = React.useState<Record<string, boolean>>(\r\n    {}\r\n  )\r\n\r\n  const toggleFolder = (id: string) => {\r\n    setOpenFolders((prev) => ({ ...prev, [id]: !prev[id] }))\r\n  }\r\n\r\n  const renderItem = (item: FileItem, level = 0) => {\r\n    const isOpen = openFolders[item.id]\r\n    const hasItems = item.items && item.items.length > 0\r\n\r\n    return (\r\n      <div key={item.id} className=\"relative\">\r\n        <button\r\n          onClick={(e) => {\r\n            e.stopPropagation()\r\n            if (hasItems) toggleFolder(item.id)\r\n          }}\r\n          className={cn(\r\n            \"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-400 transition-colors hover:bg-white/5\",\r\n            isOpen && \"text-white\"\r\n          )}\r\n          style={{ paddingLeft: `${(level + 1) * 12}px` }}\r\n        >\r\n          {hasItems ? (\r\n            <span className=\"flex items-center gap-2\">\r\n              <ChevronRight\r\n                className={cn(\r\n                  \"h-3.5 w-3.5 transition-transform\",\r\n                  isOpen && \"rotate-90\"\r\n                )}\r\n              />\r\n              {isOpen ? (\r\n                <FolderOpen className=\"h-4 w-4\" />\r\n              ) : (\r\n                <Folder className=\"h-4 w-4\" />\r\n              )}\r\n            </span>\r\n          ) : (\r\n            <File className=\"ml-5.5 h-4 w-4\" />\r\n          )}\r\n          <span>{item.name}</span>\r\n          {item.path && (\r\n            <span className=\"ml-auto text-xs text-gray-500\">{item.path}</span>\r\n          )}\r\n        </button>\r\n        {hasItems && isOpen && (\r\n          <div className=\"relative\">\r\n            {item.items!.map((subItem) => renderItem(subItem, level + 1))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className=\"sm:w-72 w-60 overflow-hidden rounded-lg bg-gray-950 p-2 \">\r\n      <div className=\"space-y-0.5\">{items.map((item) => renderItem(item))}</div>\r\n    </div>\r\n  )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/FolderTreeMenu": {
    "content": "\"use client\"\r\n\r\nimport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarHeader,\r\n  SidebarMenu,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n} from \"@/components/ui/sidebar\"\r\nimport { useSubmenuState } from \"@/hooks/use-submenu-state\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { ChevronDown, ChevronRight } from \"lucide-react\"\r\n\r\ninterface MenuItem {\r\n  id: string\r\n  title: string\r\n  items?: MenuItem[]\r\n}\r\n\r\ninterface CardSidenavProps {\r\n  items: MenuItem[]\r\n}\r\n\r\nexport function FolderTreeMenu({ items }: CardSidenavProps) {\r\n  const { openStates, toggleSubmenu } = useSubmenuState()\r\n\r\n  const renderMenuItem = (item: MenuItem) => {\r\n    const hasSubItems = item.items && item.items.length > 0\r\n    const isOpen = openStates[item.id]\r\n\r\n    return (\r\n      <SidebarMenuItem key={item.id}>\r\n        <SidebarMenuButton\r\n          onClick={() => hasSubItems && toggleSubmenu(item.id)}\r\n          className={cn(\r\n            \"w-full justify-between\",\r\n            hasSubItems && \"font-semibold\"\r\n          )}\r\n        >\r\n          {item.title}\r\n          {hasSubItems && (\r\n            <span className=\"ml-auto\">\r\n              {isOpen ? (\r\n                <ChevronDown className=\"h-4 w-4\" />\r\n              ) : (\r\n                <ChevronRight className=\"h-4 w-4\" />\r\n              )}\r\n            </span>\r\n          )}\r\n        </SidebarMenuButton>\r\n        {hasSubItems && (\r\n          <SidebarMenuSub>\r\n            {isOpen &&\r\n              item.items!.map((subItem) => (\r\n                <SidebarMenuSubItem key={subItem.id}>\r\n                  <SidebarMenuSubButton>{subItem.title}</SidebarMenuSubButton>\r\n                </SidebarMenuSubItem>\r\n              ))}\r\n          </SidebarMenuSub>\r\n        )}\r\n      </SidebarMenuItem>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <Sidebar className=\"w-64 rounded-xl border bg-card text-card-foreground shadow-sm\">\r\n      <SidebarHeader className=\"px-4 py-2\">\r\n        <h2 className=\"text-lg font-semibold\">Menu</h2>\r\n      </SidebarHeader>\r\n      <SidebarContent>\r\n        <SidebarMenu>{items.map(renderMenuItem)}</SidebarMenu>\r\n      </SidebarContent>\r\n    </Sidebar>\r\n  )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/FolderTreeTest": {
    "content": "\"use client\"\r\n\r\nimport { FolderTreeComponent } from \"./FolderTreeComponent\"\r\n\r\ntype FileItem = {\r\n  id: string\r\n  name: string\r\n  type: \"file\" | \"folder\"\r\n  path?: string\r\n  items?: FileItem[]\r\n}\r\n\r\nconst fileStructure: FileItem[] = [\r\n  {\r\n    id: \"app\",\r\n    name: \"app\",\r\n    type: \"folder\",\r\n    items: [\r\n      {\r\n        id: \"layout\",\r\n        name: \"layout.js\",\r\n        type: \"file\",\r\n      },\r\n      {\r\n        id: \"marketing\",\r\n        name: \"(marketing)\",\r\n        type: \"folder\",\r\n        items: [\r\n          {\r\n            id: \"about\",\r\n            name: \"about\",\r\n            type: \"folder\",\r\n            path: \"/about\",\r\n            items: [\r\n              {\r\n                id: \"about-page\",\r\n                name: \"page.js\",\r\n                type: \"file\",\r\n              },\r\n            ],\r\n          },\r\n          {\r\n            id: \"blog\",\r\n            name: \"blog\",\r\n            type: \"folder\",\r\n            path: \"/blog\",\r\n            items: [\r\n              {\r\n                id: \"blog-page\",\r\n                name: \"page.js\",\r\n                type: \"file\",\r\n              },\r\n            ],\r\n          },\r\n        ],\r\n      },\r\n      {\r\n        id: \"shop\",\r\n        name: \"(shop)\",\r\n        type: \"folder\",\r\n        items: [\r\n          {\r\n            id: \"account\",\r\n            name: \"account\",\r\n            type: \"folder\",\r\n            path: \"/account\",\r\n            items: [\r\n              {\r\n                id: \"account-page\",\r\n                name: \"page.js\",\r\n                type: \"file\",\r\n              },\r\n            ],\r\n          },\r\n        ],\r\n      },\r\n    ],\r\n  },\r\n]\r\n\r\nexport default function FolderTreeTest() {\r\n  return (\r\n    <div className=\"flex items-center justify-center \">\r\n      <FolderTreeComponent items={fileStructure} />\r\n    </div>\r\n  )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/form": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n  Controller,\r\n  FormProvider,\r\n  useFormContext,\r\n  type ControllerProps,\r\n  type FieldPath,\r\n  type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Label } from \"@/components/ui/label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n> = {\r\n  name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n  {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\r\n>({\r\n  ...props\r\n}: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{ name: props.name }}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  )\r\n}\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext)\r\n  const itemContext = React.useContext(FormItemContext)\r\n  const { getFieldState, formState } = useFormContext()\r\n\r\n  const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\")\r\n  }\r\n\r\n  const { id } = itemContext\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n  id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n  {} as FormItemContextValue\r\n)\r\n\r\nconst FormItem = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n  const id = React.useId()\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{ id }}>\r\n      <div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\r\n    </FormItemContext.Provider>\r\n  )\r\n})\r\nFormItem.displayName = \"FormItem\"\r\n\r\nconst FormLabel = React.forwardRef<\r\n  React.ElementRef<typeof LabelPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n  const { error, formItemId } = useFormField()\r\n\r\n  return (\r\n    <Label\r\n      ref={ref}\r\n      className={cn(error && \"text-destructive\", className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nFormLabel.displayName = \"FormLabel\"\r\n\r\nconst FormControl = React.forwardRef<\r\n  React.ElementRef<typeof Slot>,\r\n  React.ComponentPropsWithoutRef<typeof Slot>\r\n>(({ ...props }, ref) => {\r\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n  return (\r\n    <Slot\r\n      ref={ref}\r\n      id={formItemId}\r\n      aria-describedby={\r\n        !error\r\n          ? `${formDescriptionId}`\r\n          : `${formDescriptionId} ${formMessageId}`\r\n      }\r\n      aria-invalid={!!error}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nFormControl.displayName = \"FormControl\"\r\n\r\nconst FormDescription = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, ...props }, ref) => {\r\n  const { formDescriptionId } = useFormField()\r\n\r\n  return (\r\n    <p\r\n      ref={ref}\r\n      id={formDescriptionId}\r\n      className={cn(\"text-[0.8rem] text-muted-foreground\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nFormDescription.displayName = \"FormDescription\"\r\n\r\nconst FormMessage = React.forwardRef<\r\n  HTMLParagraphElement,\r\n  React.HTMLAttributes<HTMLParagraphElement>\r\n>(({ className, children, ...props }, ref) => {\r\n  const { error, formMessageId } = useFormField()\r\n  const body = error ? String(error?.message ?? \"\") : children\r\n\r\n  if (!body) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <p\r\n      ref={ref}\r\n      id={formMessageId}\r\n      className={cn(\"text-[0.8rem] font-medium text-destructive\", className)}\r\n      {...props}\r\n    >\r\n      {body}\r\n    </p>\r\n  )\r\n})\r\nFormMessage.displayName = \"FormMessage\"\r\n\r\nexport {\r\n  useFormField,\r\n  Form,\r\n  FormItem,\r\n  FormLabel,\r\n  FormControl,\r\n  FormDescription,\r\n  FormMessage,\r\n  FormField,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/hover-card": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst HoverCard = HoverCardPrimitive.Root\r\n\r\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\r\n\r\nconst HoverCardContent = React.forwardRef<\r\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\r\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\r\n  <HoverCardPrimitive.Content\r\n    ref={ref}\r\n    align={align}\r\n    sideOffset={sideOffset}\r\n    className={cn(\r\n      \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\r\n\r\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/input-group": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Textarea } from \"@/components/ui/textarea\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"input-group\"\r\n            role=\"group\"\r\n            className={cn(\r\n                \"group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none\",\r\n                \"h-9 min-w-0 has-[>textarea]:h-auto\",\r\n\r\n                // Variants based on alignment.\r\n                \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\r\n                \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\r\n                \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\r\n                \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\r\n\r\n                // Focus state.\r\n                \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]\",\r\n\r\n                // Error state.\r\n                \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\r\n\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst inputGroupAddonVariants = cva(\r\n    \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\r\n    {\r\n        variants: {\r\n            align: {\r\n                \"inline-start\":\r\n                    \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\r\n                \"inline-end\":\r\n                    \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\r\n                \"block-start\":\r\n                    \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\r\n                \"block-end\":\r\n                    \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            align: \"inline-start\",\r\n        },\r\n    }\r\n)\r\n\r\nfunction InputGroupAddon({\r\n    className,\r\n    align = \"inline-start\",\r\n    ...props\r\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\r\n    return (\r\n        <div\r\n            role=\"group\"\r\n            data-slot=\"input-group-addon\"\r\n            data-align={align}\r\n            className={cn(inputGroupAddonVariants({ align }), className)}\r\n            onClick={(e) => {\r\n                if ((e.target as HTMLElement).closest(\"button\")) {\r\n                    return\r\n                }\r\n                e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\r\n            }}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst inputGroupButtonVariants = cva(\r\n    \"text-sm shadow-none flex gap-2 items-center\",\r\n    {\r\n        variants: {\r\n            size: {\r\n                xs: \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\r\n                sm: \"h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5\",\r\n                \"icon-xs\":\r\n                    \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\r\n                \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            size: \"xs\",\r\n        },\r\n    }\r\n)\r\n\r\nfunction InputGroupButton({\r\n    className,\r\n    type = \"button\",\r\n    variant = \"ghost\",\r\n    size = \"xs\",\r\n    ...props\r\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\r\n    VariantProps<typeof inputGroupButtonVariants>) {\r\n    return (\r\n        <Button\r\n            type={type}\r\n            data-size={size}\r\n            variant={variant}\r\n            className={cn(inputGroupButtonVariants({ size }), className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\r\n    return (\r\n        <span\r\n            className={cn(\r\n                \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction InputGroupInput({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"input\">) {\r\n    return (\r\n        <Input\r\n            data-slot=\"input-group-control\"\r\n            className={cn(\r\n                \"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction InputGroupTextarea({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"textarea\">) {\r\n    return (\r\n        <Textarea\r\n            data-slot=\"input-group-control\"\r\n            className={cn(\r\n                \"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport {\r\n    InputGroup,\r\n    InputGroupAddon,\r\n    InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea\r\n}\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/input-otp": {
    "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n  React.ElementRef<typeof OTPInput>,\n  React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n  <OTPInput\n    ref={ref}\n    containerClassName={cn(\n      \"flex items-center justify-center gap-3 has-[:disabled]:opacity-50\",\n      containerClassName\n    )}\n    className={cn(\"disabled:cursor-not-allowed\", className)}\n    {...props}\n  />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex items-center gap-2\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        \"relative flex h-10 w-10 items-center justify-center rounded-xl border border-input/60 bg-background text-lg font-medium transition-all duration-200\",\n        \"shadow-sm hover:border-input/80 hover:shadow\",\n        \"focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20\",\n        isActive && \"z-10 border-ring ring-2 ring-ring/20 shadow-md\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-5 w-0.5 animate-caret-blink bg-ring duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n  React.ElementRef<\"div\">,\n  React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n  <div \n    ref={ref} \n    role=\"separator\" \n    className={cn(\"flex items-center text-muted-foreground\", className)} \n    {...props}\n  >\n    <Minus className=\"h-4 w-4\" />\n  </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
    "language": "tsx"
  },
  "@/registry/ui/input": {
    "content": "import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, React.ComponentProps<\"input\">>(\r\n  ({ className, type, ...props }, ref) => {\r\n    return (\r\n      <input\r\n        type={type}\r\n        className={cn(\r\n          \"flex h-9 w-full rounded-[8px] border border-input/50 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\r\n          className\r\n        )}\r\n        ref={ref}\r\n        {...props}\r\n      />\r\n    )\r\n  }\r\n)\r\nInput.displayName = \"Input\"\r\n\r\nexport { Input }",
    "language": "tsx"
  },
  "@/registry/ui/kbd": {
    "content": "import { cn } from \"@/lib/utils\"\r\nimport * as React from \"react\"\r\n\r\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\r\n    return (\r\n        <kbd\r\n            data-slot=\"kbd\"\r\n            className={cn(\r\n                \"bg-muted/60 text-foreground pointer-events-none inline-flex h-6 w-fit min-w-6 items-center justify-center gap-1 rounded-lg px-2 font-sans text-xs font-medium select-none\",\r\n                \"border border-border/40 shadow-sm\",\r\n                \"[&_svg:not([class*='size-'])]:size-3\",\r\n                \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background [[data-slot=tooltip-content]_&]:border-background/40\",\r\n                \"dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"kbd-group\"\r\n            className={cn(\"inline-flex items-center gap-1.5\", className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport { Kbd, KbdGroup }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/label": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nconst labelVariants = cva(\r\n  \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\r\n)\r\n\r\nconst Label = React.forwardRef<\r\n  React.ElementRef<typeof LabelPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\r\n    VariantProps<typeof labelVariants>\r\n>(({ className, ...props }, ref) => (\r\n  <LabelPrimitive.Root\r\n    ref={ref}\r\n    className={cn(labelVariants(), className)}\r\n    {...props}\r\n  />\r\n))\r\nLabel.displayName = LabelPrimitive.Root.displayName\r\n\r\nexport { Label }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/list-item": {
    "content": "\"use client\"\r\n\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport * as React from \"react\"\r\n\r\nfunction ListItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            role=\"list\"\r\n            data-slot=\"list-item-group\"\r\n            className={cn(\r\n                \"group/list-item-group flex flex-col gap-1 rounded-2xl bg-background p-2\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemSeparator({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<typeof Separator>) {\r\n    return (\r\n        <Separator\r\n            data-slot=\"list-item-separator\"\r\n            orientation=\"horizontal\"\r\n            weight=\"ultralight\"\r\n            className={cn(\"my-1.5 opacity-40\", className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst listItemVariants = cva(\r\n    \"group/list-item relative flex items-center rounded-xl border border-transparent bg-transparent text-sm transition-all duration-200 outline-none hover:bg-accent/30 hover:border-accent/50 hover:shadow-sm focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:shadow-md [a]:transition-all [a]:duration-200\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"bg-transparent\",\r\n                outline:\r\n                    \"border-border/60 bg-background shadow-sm hover:shadow-md\",\r\n                elevated:\r\n                    \"border-transparent bg-background shadow-sm hover:shadow-lg hover:border-border/40\",\r\n                filled: \"bg-muted/40 border-transparent hover:bg-muted/60\",\r\n            },\r\n            size: {\r\n                default: \"px-5 py-4 gap-4\",\r\n                sm: \"px-4 py-3 gap-3\",\r\n                lg: \"px-6 py-5 gap-5\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n            size: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\ninterface ListItemProps\r\n    extends React.ComponentProps<\"div\">,\r\n        VariantProps<typeof listItemVariants> {\r\n    asChild?: boolean\r\n}\r\n\r\nfunction ListItem({\r\n    className,\r\n    variant = \"default\",\r\n    size = \"default\",\r\n    asChild = false,\r\n    ...props\r\n}: ListItemProps) {\r\n    const Comp = asChild ? Slot : \"div\"\r\n    return (\r\n        <Comp\r\n            data-slot=\"list-item\"\r\n            data-variant={variant}\r\n            data-size={size}\r\n            className={cn(listItemVariants({ variant, size, className }))}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nconst listItemMediaVariants = cva(\r\n    \"flex shrink-0 items-center justify-center group-has-[[data-slot=list-item-description]]/list-item:self-start group-has-[[data-slot=list-item-description]]/list-item:translate-y-0.5 [&_svg]:pointer-events-none transition-transform duration-200\",\r\n    {\r\n        variants: {\r\n            variant: {\r\n                default: \"bg-transparent\",\r\n                icon: \"size-10 rounded-xl border border-border/40 bg-muted/30 [&_svg:not([class*='size-'])]:size-5 shadow-sm\",\r\n                image:\r\n                    \"size-12 rounded-xl overflow-hidden ring-1 ring-border/40 [&_img]:size-full [&_img]:object-cover shadow-sm\",\r\n                avatar:\r\n                    \"size-10 rounded-full overflow-hidden ring-2 ring-background [&_img]:size-full [&_img]:object-cover shadow-sm\",\r\n            },\r\n        },\r\n        defaultVariants: {\r\n            variant: \"default\",\r\n        },\r\n    }\r\n)\r\n\r\ninterface ListItemMediaProps\r\n    extends React.ComponentProps<\"div\">,\r\n        VariantProps<typeof listItemMediaVariants> {}\r\n\r\nfunction ListItemMedia({\r\n    className,\r\n    variant = \"default\",\r\n    ...props\r\n}: ListItemMediaProps) {\r\n    return (\r\n        <div\r\n            data-slot=\"list-item-media\"\r\n            data-variant={variant}\r\n            className={cn(listItemMediaVariants({ variant, className }))}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemContent({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"list-item-content\"\r\n            className={cn(\r\n                \"flex flex-1 flex-col gap-1.5 min-w-0\",\r\n                \"[&+[data-slot=list-item-content]]:flex-none\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemTitle({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"list-item-title\"\r\n            className={cn(\r\n                \"flex items-center gap-2 text-sm leading-snug font-semibold text-foreground\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemDescription({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"p\">) {\r\n    return (\r\n        <p\r\n            data-slot=\"list-item-description\"\r\n            className={cn(\r\n                \"text-muted-foreground line-clamp-2 text-sm leading-relaxed font-normal text-balance\",\r\n                \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-2 [&>a]:transition-colors\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemActions({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"list-item-actions\"\r\n            className={cn(\r\n                \"flex items-center gap-2 shrink-0 opacity-0 group-hover/list-item:opacity-100 transition-opacity duration-200\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemHeader({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"list-item-header\"\r\n            className={cn(\r\n                \"flex basis-full items-center justify-between gap-3\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction ListItemFooter({\r\n    className,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"list-item-footer\"\r\n            className={cn(\r\n                \"flex basis-full items-center justify-between gap-3 mt-1 pt-2 border-t border-border/30\",\r\n                className\r\n            )}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport {\r\n    ListItem,\r\n    ListItemActions,\r\n    ListItemContent,\r\n    ListItemDescription,\r\n    ListItemFooter,\r\n    ListItemGroup,\r\n    ListItemHeader,\r\n    ListItemMedia,\r\n    ListItemSeparator,\r\n    ListItemTitle,\r\n}\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/loading": {
    "content": "import { cn } from \"@/lib/utils\"\r\nimport { LoaderIcon } from \"lucide-react\"\r\n\r\nexport function Loading({ className, ...props }: React.ComponentProps<\"svg\">) {\r\n    return (\r\n        <LoaderIcon\r\n            role=\"status\"\r\n            aria-label=\"Loading\"\r\n            className={cn(\"size-4 animate-spin\", className)}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nexport function LoadingCustom() {\r\n    return (\r\n        <div className=\"flex items-center gap-4\">\r\n            <Loading />\r\n        </div>\r\n    )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/menubar": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\r\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction MenubarMenu({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\r\n  return <MenubarPrimitive.Menu {...props} />\r\n}\r\n\r\nfunction MenubarGroup({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\r\n  return <MenubarPrimitive.Group {...props} />\r\n}\r\n\r\nfunction MenubarPortal({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\r\n  return <MenubarPrimitive.Portal {...props} />\r\n}\r\n\r\nfunction MenubarRadioGroup({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\r\n  return <MenubarPrimitive.RadioGroup {...props} />\r\n}\r\n\r\nfunction MenubarSub({\r\n  ...props\r\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\r\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\r\n}\r\n\r\nconst Menubar = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex h-10 items-center gap-1 rounded-xl border border-border/60 bg-background/80 backdrop-blur-sm px-2 shadow-sm transition-all\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nMenubar.displayName = MenubarPrimitive.Root.displayName\r\n\r\nconst MenubarTrigger = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.Trigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none transition-all duration-200\",\r\n      \"hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground\",\r\n      \"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\r\n\r\nconst MenubarSubTrigger = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n  <MenubarPrimitive.SubTrigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-all duration-200\",\r\n      \"hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground\",\r\n      \"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n    <ChevronRight className=\"ml-auto h-4 w-4 opacity-60\" />\r\n  </MenubarPrimitive.SubTrigger>\r\n))\r\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\r\n\r\nconst MenubarSubContent = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.SubContent>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.SubContent\r\n    ref={ref}\r\n    className={cn(\r\n      \"z-50 min-w-[8rem] overflow-hidden rounded-2xl border border-border/60 bg-popover/80 backdrop-blur-md p-1.5 text-popover-foreground shadow-lg\",\r\n      \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\r\n      \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\r\n      \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n      \"origin-[--radix-menubar-content-transform-origin]\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\r\n\r\nconst MenubarContent = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\r\n>(\r\n  (\r\n    { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\r\n    ref\r\n  ) => (\r\n    <MenubarPrimitive.Portal>\r\n      <MenubarPrimitive.Content\r\n        ref={ref}\r\n        align={align}\r\n        alignOffset={alignOffset}\r\n        sideOffset={sideOffset}\r\n        className={cn(\r\n          \"z-50 min-w-[12rem] overflow-hidden rounded-xl border border-border/60 bg-popover/95 backdrop-blur-xl p-1.5 text-popover-foreground shadow-lg\",\r\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\r\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\r\n          \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n          \"origin-[--radix-menubar-content-transform-origin]\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </MenubarPrimitive.Portal>\r\n  )\r\n)\r\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\r\n\r\nconst MenubarItem = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <MenubarPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-all duration-200\",\r\n      \"hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground\",\r\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\r\n\r\nconst MenubarCheckboxItem = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n  <MenubarPrimitive.CheckboxItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2.5 text-sm outline-none transition-all duration-200\",\r\n      \"hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground\",\r\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    checked={checked}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2.5 flex h-4 w-4 items-center justify-center\">\r\n      <MenubarPrimitive.ItemIndicator>\r\n        <Check className=\"h-3.5 w-3.5\" />\r\n      </MenubarPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </MenubarPrimitive.CheckboxItem>\r\n))\r\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\r\n\r\nconst MenubarRadioItem = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.RadioItem>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n  <MenubarPrimitive.RadioItem\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2.5 text-sm outline-none transition-all duration-200\",\r\n      \"hover:bg-accent/50 focus:bg-accent focus:text-accent-foreground\",\r\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute left-2.5 flex h-4 w-4 items-center justify-center\">\r\n      <MenubarPrimitive.ItemIndicator>\r\n        <Circle className=\"h-2 w-2 fill-current\" />\r\n      </MenubarPrimitive.ItemIndicator>\r\n    </span>\r\n    {children}\r\n  </MenubarPrimitive.RadioItem>\r\n))\r\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\r\n\r\nconst MenubarLabel = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.Label>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\r\n    inset?: boolean\r\n  }\r\n>(({ className, inset, ...props }, ref) => (\r\n  <MenubarPrimitive.Label\r\n    ref={ref}\r\n    className={cn(\r\n      \"px-2 py-1.5 text-sm font-semibold\",\r\n      inset && \"pl-8\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\r\n\r\nconst MenubarSeparator = React.forwardRef<\r\n  React.ElementRef<typeof MenubarPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <MenubarPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 my-1.5 h-px bg-border/40\", className)}\r\n    {...props}\r\n  />\r\n))\r\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\r\n\r\nconst MenubarShortcut = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n  return (\r\n    <span\r\n      className={cn(\r\n        \"ml-auto text-xs font-medium tracking-wider text-muted-foreground/70\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\nMenubarShortcut.displayname = \"MenubarShortcut\"\r\n\r\nexport {\r\n  Menubar,\r\n  MenubarMenu,\r\n  MenubarTrigger,\r\n  MenubarContent,\r\n  MenubarItem,\r\n  MenubarSeparator,\r\n  MenubarLabel,\r\n  MenubarCheckboxItem,\r\n  MenubarRadioGroup,\r\n  MenubarRadioItem,\r\n  MenubarPortal,\r\n  MenubarSubContent,\r\n  MenubarSubTrigger,\r\n  MenubarGroup,\r\n  MenubarSub,\r\n  MenubarShortcut,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/navigation-menu": {
    "content": "import * as React from \"react\"\r\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\r\nimport { cva } from \"class-variance-authority\"\r\nimport { ChevronDownIcon } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction NavigationMenu({\r\n  className,\r\n  children,\r\n  viewport = true,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\r\n  viewport?: boolean\r\n}) {\r\n  return (\r\n    <NavigationMenuPrimitive.Root\r\n      data-slot=\"navigation-menu\"\r\n      data-viewport={viewport}\r\n      className={cn(\r\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n      {viewport && <NavigationMenuViewport />}\r\n    </NavigationMenuPrimitive.Root>\r\n  )\r\n}\r\n\r\nfunction NavigationMenuList({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\r\n  return (\r\n    <NavigationMenuPrimitive.List\r\n      data-slot=\"navigation-menu-list\"\r\n      className={cn(\r\n        \"group flex flex-1 list-none items-center justify-center gap-1\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction NavigationMenuItem({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\r\n  return (\r\n    <NavigationMenuPrimitive.Item\r\n      data-slot=\"navigation-menu-item\"\r\n      className={cn(\"relative\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nconst navigationMenuTriggerStyle = cva(\r\n  \"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\"\r\n)\r\n\r\nfunction NavigationMenuTrigger({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\r\n  return (\r\n    <NavigationMenuPrimitive.Trigger\r\n      data-slot=\"navigation-menu-trigger\"\r\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\r\n      {...props}\r\n    >\r\n      {children}{\" \"}\r\n      <ChevronDownIcon\r\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\r\n        aria-hidden=\"true\"\r\n      />\r\n    </NavigationMenuPrimitive.Trigger>\r\n  )\r\n}\r\n\r\nfunction NavigationMenuContent({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\r\n  return (\r\n    <NavigationMenuPrimitive.Content\r\n      data-slot=\"navigation-menu-content\"\r\n      className={cn(\r\n        \"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\",\r\n        \"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\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction NavigationMenuViewport({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\r\n      )}\r\n    >\r\n      <NavigationMenuPrimitive.Viewport\r\n        data-slot=\"navigation-menu-viewport\"\r\n        className={cn(\r\n          \"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)]\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nfunction NavigationMenuLink({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\r\n  return (\r\n    <NavigationMenuPrimitive.Link\r\n      data-slot=\"navigation-menu-link\"\r\n      className={cn(\r\n        \"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\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction NavigationMenuIndicator({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\r\n  return (\r\n    <NavigationMenuPrimitive.Indicator\r\n      data-slot=\"navigation-menu-indicator\"\r\n      className={cn(\r\n        \"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\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\" />\r\n    </NavigationMenuPrimitive.Indicator>\r\n  )\r\n}\r\n\r\nexport {\r\n  NavigationMenu,\r\n  NavigationMenuList,\r\n  NavigationMenuItem,\r\n  NavigationMenuContent,\r\n  NavigationMenuTrigger,\r\n  NavigationMenuLink,\r\n  NavigationMenuIndicator,\r\n  NavigationMenuViewport,\r\n  navigationMenuTriggerStyle,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/note": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { AnimatePresence, motion } from \"framer-motion\"\r\nimport { AlertTriangle, CheckCircle2, Info, X, XCircle } from \"lucide-react\"\r\nimport { JSX, useState } from \"react\"\r\n\r\ntype NoteVariant = \"info\" | \"warning\" | \"success\" | \"error\" | \"neutral\"\r\n\r\ninterface NoteProps {\r\n  variant?: NoteVariant\r\n  title?: string\r\n  children: React.ReactNode\r\n  closable?: boolean\r\n  onClose?: () => void\r\n  className?: string\r\n}\r\n\r\nconst variantStyles: Record<\r\n  NoteVariant,\r\n  { border: string; text: string; icon: JSX.Element }\r\n> = {\r\n  info: {\r\n    border: \"border-blue-200 dark:border-blue-800\",\r\n    text: \"text-blue-600 dark:text-blue-400\",\r\n    icon: <Info className=\"w-4 h-4\" />,\r\n  },\r\n  warning: {\r\n    border: \"border-amber-200 dark:border-amber-800\",\r\n    text: \"text-amber-600 dark:text-amber-400\",\r\n    icon: <AlertTriangle className=\"w-4 h-4\" />,\r\n  },\r\n  success: {\r\n    border: \"border-green-200 dark:border-green-800\",\r\n    text: \"text-green-600 dark:text-green-400\",\r\n    icon: <CheckCircle2 className=\"w-4 h-4\" />,\r\n  },\r\n  error: {\r\n    border: \"border-red-600 dark:border-red-800\",\r\n    text: \"text-red-600 dark:text-red-400\",\r\n    icon: <XCircle className=\"w-4 h-4\" />,\r\n  },\r\n  neutral: {\r\n    border: \"border-gray-200 dark:border-gray-700\",\r\n    text: \"text-gray-600 dark:text-gray-400\",\r\n    icon: <Info className=\"w-4 h-4\" />,\r\n  },\r\n}\r\n\r\nexport function Note({\r\n  variant = \"neutral\",\r\n  title,\r\n  children,\r\n  closable,\r\n  onClose,\r\n  className,\r\n}: NoteProps) {\r\n  const [visible, setVisible] = useState(true)\r\n  const style = variantStyles[variant]\r\n\r\n  const handleClose = () => {\r\n    setVisible(false)\r\n    onClose?.()\r\n  }\r\n\r\n  return (\r\n    <AnimatePresence>\r\n      {visible && (\r\n        <motion.div\r\n          initial={{ opacity: 0, scale: 0.98 }}\r\n          animate={{ opacity: 1, scale: 1 }}\r\n          exit={{ opacity: 0, scale: 0.98 }}\r\n          transition={{ duration: 0.2 }}\r\n          className={cn(\r\n            \"relative flex items-start gap-2 rounded-xl border-2 p-3 bg-white/80 dark:bg-zinc-900/50 backdrop-blur-sm\",\r\n            style.border,\r\n            className\r\n          )}\r\n        >\r\n          <div className={cn(\"mt-0.5\", style.text)}>{style.icon}</div>\r\n\r\n          <div className=\"flex-1 space-y-1\">\r\n            {title && (\r\n              <h4 className=\"text-sm font-medium text-black dark:text-white\">\r\n                {title}\r\n              </h4>\r\n            )}\r\n            <div className=\"text-sm text-zinc-700 dark:text-zinc-300\">\r\n              {children}\r\n            </div>\r\n          </div>\r\n\r\n          {closable && (\r\n            <button\r\n              onClick={handleClose}\r\n              className=\"p-1 rounded-md text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-200 transition\"\r\n            >\r\n              <X className=\"w-4 h-4\" />\r\n            </button>\r\n          )}\r\n        </motion.div>\r\n      )}\r\n    </AnimatePresence>\r\n  )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/pagination": {
    "content": "import { cn } from \"@/lib/utils\"\r\nimport {\r\n  ChevronLeftIcon,\r\n  ChevronRightIcon,\r\n  MoreHorizontalIcon,\r\n} from \"lucide-react\"\r\nimport Link from \"next/link\"\r\nimport * as React from \"react\"\r\n\r\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\r\n  return (\r\n    <nav\r\n      role=\"navigation\"\r\n      aria-label=\"pagination\"\r\n      data-slot=\"pagination\"\r\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction PaginationContent({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"ul\">) {\r\n  return (\r\n    <ul\r\n      data-slot=\"pagination-content\"\r\n      className={cn(\r\n        \"flex flex-row items-center gap-1 rounded-2xl bg-background/80 backdrop-blur-md border border-border/50 p-1 shadow-sm transition-all\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\r\n  return <li data-slot=\"pagination-item\" {...props} />\r\n}\r\n\r\ntype PaginationLinkProps = {\r\n  href?: string\r\n  className?: string\r\n  isActive?: boolean\r\n  size?: \"default\" | \"sm\" | \"lg\" | \"icon\"\r\n} & (\r\n  | ({ href: string } & Omit<React.ComponentProps<typeof Link>, \"className\">)\r\n  | ({ href?: never } & React.ComponentProps<\"button\">)\r\n)\r\n\r\nfunction PaginationLink({\r\n  className,\r\n  isActive,\r\n  size = \"icon\",\r\n  ...props\r\n}: PaginationLinkProps) {\r\n  const classes = cn(\r\n    // Base styles - Apple inspired\r\n    \"relative inline-flex items-center justify-center\",\r\n    \"font-medium text-sm tracking-tight\",\r\n    \"transition-all duration-200 ease-out\",\r\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2\",\r\n    \r\n    // Size variants\r\n    size === \"icon\" && \"h-8 w-8 rounded-xl\",\r\n    size === \"sm\" && \"h-7 px-3 rounded-xl\",\r\n    size === \"default\" && \"h-8 px-3.5 rounded-xl\",\r\n    size === \"lg\" && \"h-9 px-4 rounded-xl\",\r\n    \r\n    // Active state - Apple blue accent\r\n    isActive && [\r\n      \"bg-primary text-primary-foreground\",\r\n      \"shadow-sm shadow-primary/20\",\r\n      \"scale-100\",\r\n    ],\r\n    \r\n    // Inactive state - subtle hover\r\n    !isActive && [\r\n      \"text-muted-foreground hover:text-foreground\",\r\n      \"hover:bg-accent/50\",\r\n      \"active:scale-95\",\r\n    ],\r\n    \r\n    className\r\n  )\r\n\r\n  const commonProps = {\r\n    \"aria-current\": isActive ? (\"page\" as const) : undefined,\r\n    \"data-slot\": \"pagination-link\" as const,\r\n    \"data-active\": isActive,\r\n    className: classes,\r\n  }\r\n\r\n  if (\"href\" in props && props.href) {\r\n    const { href, ...linkProps } = props\r\n    return <Link href={href} {...commonProps} {...linkProps} />\r\n  }\r\n\r\n  const buttonProps = props as React.ComponentProps<\"button\">\r\n  return <button type=\"button\" {...commonProps} {...buttonProps} />\r\n}\r\n\r\nfunction PaginationPrevious({\r\n  className,\r\n  ...props\r\n}: Omit<PaginationLinkProps, \"size\">) {\r\n  return (\r\n    <PaginationLink\r\n      aria-label=\"Go to previous page\"\r\n      size=\"default\"\r\n      className={cn(\r\n        \"gap-1.5 pl-2.5 pr-3 font-medium\",\r\n        \"hover:bg-accent/60 hover:shadow-sm\",\r\n        className\r\n      )}\r\n      {...(props as PaginationLinkProps)}\r\n    >\r\n      <ChevronLeftIcon className=\"h-4 w-4\" strokeWidth={2.5} />\r\n      <span className=\"hidden sm:inline-block\">Previous</span>\r\n    </PaginationLink>\r\n  )\r\n}\r\n\r\nfunction PaginationNext({\r\n  className,\r\n  ...props\r\n}: Omit<PaginationLinkProps, \"size\">) {\r\n  return (\r\n    <PaginationLink\r\n      aria-label=\"Go to next page\"\r\n      size=\"default\"\r\n      className={cn(\r\n        \"gap-1.5 pl-3 pr-2.5 font-medium\",\r\n        \"hover:bg-accent/60 hover:shadow-sm\",\r\n        className\r\n      )}\r\n      {...(props as PaginationLinkProps)}\r\n    >\r\n      <span className=\"hidden sm:inline-block\">Next</span>\r\n      <ChevronRightIcon className=\"h-4 w-4\" strokeWidth={2.5} />\r\n    </PaginationLink>\r\n  )\r\n}\r\n\r\nfunction PaginationEllipsis({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"span\">) {\r\n  return (\r\n    <span\r\n      aria-hidden\r\n      data-slot=\"pagination-ellipsis\"\r\n      className={cn(\r\n        \"flex h-8 w-8 items-center justify-center\",\r\n        \"text-muted-foreground/50\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <MoreHorizontalIcon className=\"h-4 w-4\" strokeWidth={2.5} />\r\n      <span className=\"sr-only\">More pages</span>\r\n    </span>\r\n  )\r\n}\r\n\r\nexport {\r\n  Pagination,\r\n  PaginationContent,\r\n  PaginationEllipsis,\r\n  PaginationItem,\r\n  PaginationLink,\r\n  PaginationNext,\r\n  PaginationPrevious\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/popover": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\r\nimport * as React from \"react\"\r\n\r\nconst Popover = PopoverPrimitive.Root\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger\r\n\r\nconst PopoverAnchor = PopoverPrimitive.Anchor\r\n\r\nconst PopoverContent = React.forwardRef<\r\n  React.ElementRef<typeof PopoverPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\r\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\r\n  <PopoverPrimitive.Portal>\r\n    <PopoverPrimitive.Content\r\n      ref={ref}\r\n      align={align}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"z-50 w-72 rounded-2xl border-none bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </PopoverPrimitive.Portal>\r\n))\r\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\r\n\r\nexport { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/pre": {
    "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\"\r\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { languageIcons } from \"@/settings/LanguageIcon\"\r\nimport { Check, Clipboard, FileCode, RotateCcw, Search, X } from \"lucide-react\"\r\nimport Prism from \"prismjs\"\r\nimport type React from \"react\"\r\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\r\n\r\ninterface PreProps {\r\n  children?: React.ReactNode\r\n  raw?: string\r\n  className?: string\r\n  highlightLines?: number[]\r\n  folderPath?: string\r\n  showLineNumbers?: boolean\r\n  contentKey?: string | number\r\n  title?: string\r\n  description?: string\r\n  maxHeight?: number\r\n  showHeader?: boolean\r\n  enableSearch?: boolean\r\n  wordWrap?: boolean\r\n  showBorder?: boolean\r\n  showShadow?: boolean\r\n  autoFormat?: boolean\r\n  onContentChange?: (content: string) => void\r\n  customActions?: React.ReactNode\r\n}\r\n\r\ninterface CopyButtonProps {\r\n  content: string\r\n  className?: string\r\n}\r\n\r\nconst DEFAULT_LANGUAGE = \"tsx\"\r\nconst COPY_FEEDBACK_DURATION = 2000\r\nconst DEFAULT_MAX_HEIGHT = 650\r\n\r\nconst extractLanguageFromClassName = (className?: string): string => {\r\n  if (!className?.includes(\"language-\")) return DEFAULT_LANGUAGE\r\n  return className.split(\"language-\")[1]?.split(\" \")[0] || DEFAULT_LANGUAGE\r\n}\r\n\r\nconst processContent = (children?: React.ReactNode, raw?: string): string => {\r\n  if (raw) return raw.trim()\r\n  if (typeof children === \"string\") return children.trim()\r\n  if (children) return children.toString().trim()\r\n  return \"\"\r\n}\r\n\r\nconst CopyButton: React.FC<CopyButtonProps> = ({ content, className }) => {\r\n  const [state, setState] = useState<\"idle\" | \"copied\" | \"error\">(\"idle\")\r\n  const [hasCopied, setHasCopied] = useState(false)\r\n  const { isCopied, copyToClipboard } = useCopyToClipboard({\r\n    timeout: 2000,\r\n    onCopy: () => setState(\"copied\"),\r\n  })\r\n  useEffect(() => {\r\n    if (hasCopied) {\r\n      const timer = setTimeout(() => setHasCopied(false), 2000)\r\n      return () => clearTimeout(timer)\r\n    }\r\n  }, [hasCopied])\r\n\r\n  useEffect(() => {\r\n    if (isCopied) {\r\n      setState(\"copied\")\r\n    } else {\r\n      setState(\"idle\")\r\n    }\r\n  }, [isCopied])\r\n\r\n  const handleCopy = () => {\r\n    try {\r\n      copyToClipboard(content)\r\n    } catch {\r\n      setState(\"error\")\r\n    }\r\n  }\r\n\r\n  const buttonConfig = {\r\n    idle: {\r\n      icon: (\r\n        <Clipboard className=\"w-4 h-4 text-gray-600 hover:text-gray-900 hover:bg-gray-100/80 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800/80 transition-colors\" />\r\n      ),\r\n      title: \"Copy to clipboard\",\r\n    },\r\n    copied: {\r\n      icon: <Check className=\"w-4 h-4 text-green-600\" />,\r\n      title: \"Copied!\",\r\n    },\r\n    error: {\r\n      icon: <RotateCcw className=\"w-4 h-4 text-red-600\" />,\r\n      title: \"Failed to copy\",\r\n    },\r\n  }\r\n\r\n  const currentConfig = buttonConfig[state]\r\n\r\n  return (\r\n    <TooltipProvider>\r\n      <Tooltip>\r\n        <TooltipTrigger asChild>\r\n          <Button\r\n            onClick={handleCopy}\r\n            variant=\"ghost\"\r\n            size=\"icon\"\r\n            className={cn(\r\n              \"flex items-center justify-center w-6 h-6 rounded-sm hover:bg-muted/50 transition-all duration-200 !ml-0\",\r\n              className\r\n            )}\r\n            title={currentConfig.title}\r\n            aria-label={currentConfig.title}\r\n          >\r\n            {currentConfig.icon}\r\n          </Button>\r\n        </TooltipTrigger>\r\n        <TooltipContent>\r\n          {hasCopied ? \"Copied\" : \"Copy command\"}\r\n        </TooltipContent>\r\n      </Tooltip>\r\n    </TooltipProvider>\r\n  )\r\n}\r\n\r\n\r\nconst SearchInput: React.FC<{\r\n  searchQuery: string\r\n  onSearchChange: (query: string) => void\r\n  onClose: () => void\r\n}> = ({ searchQuery, onSearchChange, onClose }) => {\r\n  const inputRef = useRef<HTMLInputElement>(null)\r\n\r\n  useEffect(() => {\r\n    inputRef.current?.focus()\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    const handleEscape = (e: KeyboardEvent) => {\r\n      if (e.key === \"Escape\") onClose()\r\n    }\r\n    document.addEventListener(\"keydown\", handleEscape)\r\n    return () => document.removeEventListener(\"keydown\", handleEscape)\r\n  }, [onClose])\r\n\r\n  return (\r\n    <div className=\"flex items-center space-x-2 px-3 py-2 border-b border-border bg-background\">\r\n      <Search className=\"w-4 h-4 text-muted-foreground\" />\r\n      <input\r\n        ref={inputRef}\r\n        type=\"text\"\r\n        value={searchQuery}\r\n        onChange={(e) => onSearchChange(e.target.value)}\r\n        placeholder=\"Search in code...\"\r\n        className=\"flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground text-foreground\"\r\n      />\r\n      <button onClick={onClose} className=\"p-1 hover:bg-muted rounded transition-colors\">\r\n        <X className=\"w-4 h-4 text-muted-foreground hover:text-foreground\" />\r\n      </button>\r\n    </div>\r\n  )\r\n}\r\n\r\nconst CodeHeader: React.FC<{\r\n  title?: string\r\n  description?: string\r\n  folderPath?: string\r\n  language: string\r\n  enableSearch: boolean\r\n  isSearchVisible: boolean\r\n  onToggleSearch: () => void\r\n  content: string\r\n  customActions?: React.ReactNode\r\n}> = ({\r\n  title,\r\n  description,\r\n  folderPath,\r\n  language,\r\n  enableSearch,\r\n  isSearchVisible,\r\n  onToggleSearch,\r\n  content,\r\n  customActions,\r\n}) => (\r\n    <div className=\"overflow-x-auto hide-scrollbar flex items-center justify-between h-[35px] px-4 bg-muted/50\">\r\n      <div className=\"flex items-center justify-between space-x-4 rtl:space-x-reverse\">\r\n        <div className=\"flex space-x-1.5 rtl:space-x-reverse items-center\" role=\"presentation\" aria-label=\"Window controls\">\r\n          <div className=\"w-3 h-3 rounded-full bg-[#fc5f57] border border-red-500/40\" />\r\n          <div className=\"w-3 h-3 rounded-full bg-[#fdbc2e] border border-yellow-500/40\" />\r\n          <div className=\"w-3 h-3 rounded-full bg-[#28c83f] border border-green-500/40\" />\r\n        </div>\r\n        {title ? (\r\n          <div className=\"flex items-center justify-center space-x-4 rtl:space-x-reverse\">\r\n            <span className=\"font-medium text-muted-foreground text-[13px] text-nowrap\">{title}</span>\r\n            {description && <p className=\"text-xs  text-muted-foreground\">{description}</p>}\r\n          </div>\r\n        ) : folderPath ? (\r\n          <span dir=\"ltr\" className=\"code-block-folder-path font-medium text-muted-foreground text-sm text-nowrap max-w-md\">\r\n            {folderPath}\r\n          </span>\r\n        ) : null}\r\n      </div>\r\n      <div className=\"flex items-center space-x-2 rtl:space-x-reverse\">\r\n        {enableSearch && (\r\n          <button\r\n            onClick={onToggleSearch}\r\n            className={cn(\r\n              \"md:flex hidden items-center justify-center w-8 h-8 rounded-sm hover:bg-muted/50 transition-all duration-200\",\r\n              isSearchVisible && \"bg-muted/70\",\r\n            )}\r\n            title=\"Search in code\"\r\n            aria-label=\"Toggle search\"\r\n          >\r\n            <Search className=\"w-4 h-4 text-muted-foreground hover:text-foreground transition-colors\" />\r\n          </button>\r\n        )}\r\n        <CopyButton content={content} />\r\n        <div className=\"w-4 h-4 rounded-sm flex items-center justify-center\" title={`Language: ${language}`}>\r\n          {languageIcons[language] || <FileCode className=\"w-4 h-4 text-muted-foreground\" />}\r\n        </div>\r\n        {customActions}\r\n      </div>\r\n    </div>\r\n  )\r\n\r\nconst Pre: React.FC<PreProps> = ({\r\n  children,\r\n  raw,\r\n  className = \"\",\r\n  highlightLines = [],\r\n  folderPath,\r\n  showLineNumbers = true,\r\n  contentKey,\r\n  title,\r\n  description,\r\n  maxHeight = DEFAULT_MAX_HEIGHT,\r\n  showHeader = true,\r\n  enableSearch = true,\r\n  wordWrap = false,\r\n  autoFormat = true,\r\n  showBorder = true,\r\n  onContentChange,\r\n  showShadow = true,\r\n  customActions,\r\n}) => {\r\n  const [isClient, setIsClient] = useState(false)\r\n  const [searchQuery, setSearchQuery] = useState(\"\")\r\n  const [isSearchVisible, setIsSearchVisible] = useState(false)\r\n  const preRef = useRef<HTMLPreElement>(null)\r\n  const codeRef = useRef<HTMLElement>(null)\r\n\r\n  // Memoized values\r\n  const language = useMemo(() => extractLanguageFromClassName(className), [className])\r\n\r\n  const content = useMemo(() => {\r\n    const processed = processContent(children, raw)\r\n    onContentChange?.(processed)\r\n    return processed\r\n  }, [children, raw, contentKey, onContentChange])\r\n\r\n  const filteredContent = useMemo(() => {\r\n    if (!searchQuery.trim()) return content\r\n\r\n    const searchRegex = new RegExp(searchQuery.trim(), \"gi\")\r\n    return content\r\n      .split(\"\\n\")\r\n      .filter((line) => searchRegex.test(line))\r\n      .join(\"\\n\")\r\n  }, [content, searchQuery])\r\n\r\n  const displayContent = searchQuery.trim() ? filteredContent : content\r\n  // Effects\r\n  useEffect(() => {\r\n    setIsClient(true)\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    if (!isClient || !codeRef.current) return\r\n\r\n    codeRef.current.textContent = displayContent\r\n    Prism.highlightElement(codeRef.current)\r\n\r\n    if (showLineNumbers && preRef.current) {\r\n      preRef.current.classList.add(\"line-numbers\")\r\n    }\r\n  }, [displayContent, isClient, language, showLineNumbers])\r\n\r\n  const handleToggleSearch = useCallback(() => {\r\n    setIsSearchVisible((prev) => !prev)\r\n    if (isSearchVisible) {\r\n      setSearchQuery(\"\")\r\n    }\r\n  }, [isSearchVisible])\r\n\r\n  const handleSearchChange = useCallback((query: string) => {\r\n    setSearchQuery(query)\r\n  }, [])\r\n\r\n  const handleCloseSearch = useCallback(() => {\r\n    setIsSearchVisible(false)\r\n    setSearchQuery(\"\")\r\n  }, [])\r\n\r\n  const lineNumbersClass = showLineNumbers ? \"line-numbers\" : \"\"\r\n\r\n  if (!isClient) {\r\n    return (\r\n      <div className=\"code-block-container relative group rounded-[6px] my-5 w-full border border-border bg-background\">\r\n        <pre className={`overflow-x-auto ${lineNumbersClass}`} style={{ maxHeight: `${maxHeight}px` }}>\r\n          <code className=\"text-foreground\">{content}</code>\r\n        </pre>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cn(\"code-block-container relative group rounded-[6px] w-full\", showBorder && \" border border-border\")}\r\n      role=\"region\"\r\n      aria-label=\"Code block\"\r\n    >\r\n      {showHeader && (\r\n        <CodeHeader\r\n          title={title}\r\n          description={description}\r\n          folderPath={folderPath}\r\n          language={language}\r\n          enableSearch={enableSearch}\r\n          isSearchVisible={isSearchVisible}\r\n          onToggleSearch={handleToggleSearch}\r\n          content={raw || content}\r\n          customActions={customActions}\r\n        />\r\n      )}\r\n      {isSearchVisible && (\r\n        <SearchInput searchQuery={searchQuery} onSearchChange={handleSearchChange} onClose={handleCloseSearch} />\r\n      )}\r\n      <pre\r\n        ref={preRef}\r\n        className={cn(\r\n          `language-${language}`,\r\n          className,\r\n          \"overflow-x-auto\",\r\n          \"border-none\",\r\n          \"font-mono\",\r\n          \"font-medium\",\r\n          lineNumbersClass,\r\n          wordWrap && \"whitespace-pre-wrap\",\r\n        )}\r\n        style={{ maxHeight: `${maxHeight}px` }}\r\n        data-line={highlightLines.length > 0 ? highlightLines.join(\",\") : undefined}\r\n      >\r\n        <code ref={codeRef} className={`language-${language} text-foreground not-prose`} data-language={language}>\r\n          {displayContent}\r\n        </code>\r\n        {/* {\r\n          showShadow && (\r\n            <div className=\"absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-background/90 via-background/40 to-transparent pointer-events-none z-10\" />\r\n          )\r\n        } */}\r\n      </pre>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Pre",
    "language": "tsx"
  },
  "@/registry/ui/product-card": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Truck } from \"lucide-react\"\r\nimport { useState } from \"react\"\r\n\r\nexport default function ProductCard() {\r\n  const [isDetailsClicked, setIsDetailsClicked] = useState(false)\r\n  return (\r\n    <div className=\"select-none max-w-[300px] relative\">c\r\n      <div className=\"absolute top-[3%] -left-[3%] z-10 px-[5px] py-[7px] flex items-center justify-center gap-2 text-background text-xs rounded-tl-[0] rounded-br-[5px] rounded-tr-[5px] rounded-bl-[0] bg-[#676769] dark:bg-[#dad4d4]\">\r\n        <Truck className=\"w-4 h-4\" />\r\n        Fast shipping\r\n      </div>\r\n      <div className=\"absolute right-[0px] z-10 flex items-center justify-center text-background text-xs\">\r\n        <span className=\"rounded-none text-sm px-2 py-1 bg-destructive\">\r\n          20%\r\n        </span>\r\n      </div>\r\n      <div className=\"p-0\">\r\n        <div className=\"relative\">\r\n          <img\r\n            src=\"\\components\\product-card-1.png\"\r\n            alt=\"LED Chandelier\"\r\n            className=\"object-contain\"\r\n          />\r\n        </div>\r\n        <div className=\"space-y-1\">\r\n          <p className=\"text-[19px] mt-[10px] font-medium\">PRODUCT-MC6015-H3</p>\r\n          <h3 className=\" leading-tight text-zinc-500\">\r\n            Aluminum Shade + Glass LED Chandelier With E27 Base & 36W\r\n          </h3>\r\n          <div className=\"flex items-baseline gap-2\">\r\n            <span className=\"text-lg font-bold text-red-500\">EGP 2576.00</span>\r\n            <span className=\"text-sm text-zinc-400 line-through\">\r\n              EGP 3219.00\r\n            </span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div className=\"flex justify-between gap-2 mt-[10px]\">\r\n        <button\r\n          className={cn(\"flex-1 border border-black py-2 px-2 rounded-md\", {\r\n            \"bg-gray-100\": isDetailsClicked,\r\n          })}\r\n          onClick={() => setIsDetailsClicked(true)}\r\n        >\r\n          More details\r\n        </button>\r\n        <button className=\"shrink-0 bg-black rounded-md py-1 px-2 \">\r\n          <svg\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            viewBox=\"0 0 576 512\"\r\n            width={20}\r\n            height={20}\r\n            fill=\"white\"\r\n          >\r\n            <path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\" />\r\n          </svg>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/progress": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Progress = React.forwardRef<\r\n  React.ElementRef<typeof ProgressPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\r\n>(({ className, value, ...props }, ref) => (\r\n  <ProgressPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <ProgressPrimitive.Indicator\r\n      className=\"h-full w-full flex-1 bg-primary transition-all\"\r\n      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\r\n    />\r\n  </ProgressPrimitive.Root>\r\n))\r\nProgress.displayName = ProgressPrimitive.Root.displayName\r\n\r\nexport { Progress }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/radio-group": {
    "content": "\"use client\"\r\n\r\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\r\nimport { CircleIcon } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst RadioGroup = React.forwardRef<\r\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <RadioGroupPrimitive.Root\r\n      ref={ref}\r\n      data-slot=\"radio-group\"\r\n      className={cn(\"grid gap-4\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <RadioGroupPrimitive.Item\r\n      ref={ref}\r\n      data-slot=\"radio-group-item\"\r\n      className={cn(\r\n        \"aspect-square h-5 w-5 shrink-0 rounded-full\",\r\n        \"border-2 border-border/60 bg-background\",\r\n        \"shadow-sm transition-all duration-200\",\r\n        \"hover:border-border/80 hover:shadow\",\r\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:border-ring\",\r\n        \"disabled:cursor-not-allowed disabled:opacity-40\",\r\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/30\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <RadioGroupPrimitive.Indicator\r\n        data-slot=\"radio-group-indicator\"\r\n        className=\"relative flex items-center justify-center\"\r\n      >\r\n        <CircleIcon className=\"h-2.5 w-2.5 fill-primary text-primary transition-all duration-200\" />\r\n      </RadioGroupPrimitive.Indicator>\r\n    </RadioGroupPrimitive.Item>\r\n  )\r\n})\r\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\r\n\r\nexport { RadioGroup, RadioGroupItem }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/resizable": {
    "content": "\"use client\"\r\n\r\nimport { GripVertical } from \"lucide-react\"\r\nimport * as ResizablePrimitive from \"react-resizable-panels\"\r\nimport * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst ResizablePanelGroup = React.forwardRef<\r\n  React.ElementRef<typeof ResizablePrimitive.PanelGroup>,\r\n  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.PanelGroup>\r\n>(({ className, ...props }, ref) => (\r\n  <ResizablePrimitive.PanelGroup\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nResizablePanelGroup.displayName = \"ResizablePanelGroup\"\r\n\r\nconst ResizablePanel = ResizablePrimitive.Panel\r\n\r\nconst ResizableHandle = React.forwardRef<\r\n  React.ElementRef<typeof ResizablePrimitive.PanelResizeHandle>,\r\n  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.PanelResizeHandle> & {\r\n    withHandle?: boolean\r\n  }\r\n>(({ withHandle, className, ...props }, ref) => (\r\n  <ResizablePrimitive.PanelResizeHandle\r\n    ref={ref}\r\n    className={cn(\r\n      // Base styles - Apple-like premium design\r\n      \"relative flex items-center justify-center\",\r\n      // Horizontal handle\r\n      \"w-px bg-border/40 transition-colors duration-200\",\r\n      \"hover:bg-border/60 active:bg-border/80\",\r\n      // Interactive area\r\n      \"after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 after:transition-colors after:duration-200\",\r\n      \"hover:after:bg-border/30\",\r\n      // Focus states\r\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2\",\r\n      // Vertical handle\r\n      \"data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full\",\r\n      \"data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1\",\r\n      \"data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2\",\r\n      \"data-[panel-group-direction=vertical]:after:translate-x-0\",\r\n      \"[&[data-panel-group-direction=vertical]>div]:rotate-90\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {withHandle && (\r\n      <div className=\"z-10 flex h-6 w-5 items-center justify-center rounded-lg border border-border/60 bg-background/80 backdrop-blur-sm shadow-sm transition-all duration-200 hover:border-border/80 hover:shadow-md\">\r\n        <GripVertical className=\"h-3 w-3 text-muted-foreground/70\" />\r\n      </div>\r\n    )}\r\n  </ResizablePrimitive.PanelResizeHandle>\r\n))\r\nResizableHandle.displayName = \"ResizableHandle\"\r\n\r\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/scroll-area": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\r\nimport * as React from \"react\"\r\n\r\ninterface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\r\n  /**\r\n   * The viewport's height\r\n   * @default \"100%\"\r\n   */\r\n  viewportHeight?: string | number\r\n  /**\r\n   * Whether to hide the scrollbar when not in use\r\n   * @default true\r\n   */\r\n  autoHide?: boolean\r\n  /**\r\n   * The scrollbar's width\r\n   * @default 10\r\n   */\r\n  scrollbarSize?: number\r\n  /**\r\n   * The scrollbar's color\r\n   */\r\n  scrollbarColor?: string\r\n  /**\r\n   * The scrollbar's border radius\r\n   * @default \"9999px\"\r\n   */\r\n  scrollbarRadius?: string | number\r\n}\r\n\r\nconst ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(\r\n  (\r\n    {\r\n      className,\r\n      children,\r\n      viewportHeight = \"100%\",\r\n      autoHide = true,\r\n      scrollbarSize = 10,\r\n      scrollbarColor,\r\n      scrollbarRadius = \"9999px\",\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => (\r\n    <ScrollAreaPrimitive.Root ref={ref} className={cn(\"relative overflow-hidden\", className)} {...props}>\r\n      <ScrollAreaPrimitive.Viewport className=\"h-full w-full rounded-[inherit]\" style={{ height: viewportHeight }}>\r\n        {children}\r\n      </ScrollAreaPrimitive.Viewport>\r\n      <ScrollBar\r\n        orientation=\"vertical\"\r\n        autoHide={autoHide}\r\n        size={scrollbarSize}\r\n        color={scrollbarColor}\r\n        radius={scrollbarRadius}\r\n      />\r\n      <ScrollBar\r\n        orientation=\"horizontal\"\r\n        autoHide={autoHide}\r\n        size={scrollbarSize}\r\n        color={scrollbarColor}\r\n        radius={scrollbarRadius}\r\n      />\r\n      <ScrollAreaPrimitive.Corner className=\"bg-muted\" />\r\n    </ScrollAreaPrimitive.Root>\r\n  ),\r\n)\r\nScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\r\n\r\ninterface ScrollBarProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> {\r\n  autoHide?: boolean\r\n  size?: number\r\n  color?: string\r\n  radius?: string | number\r\n}\r\n\r\nconst ScrollBar = React.forwardRef<React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, ScrollBarProps>(\r\n  ({ className, orientation = \"vertical\", autoHide = true, size = 10, color, radius = \"9999px\", ...props }, ref) => {\r\n    const isVertical = orientation === \"vertical\"\r\n    const thumbColor = color || \"rgba(155, 155, 155, 0.5)\"\r\n\r\n    return (\r\n      <ScrollAreaPrimitive.ScrollAreaScrollbar\r\n        ref={ref}\r\n        orientation={orientation}\r\n        data-auto-hide={autoHide ? \"true\" : \"false\"}\r\n        className={cn(\r\n          \"flex touch-none select-none transition-all duration-150 ease-out\",\r\n          autoHide && \"opacity-0 hover:opacity-100 data-[state=visible]:opacity-100\",\r\n          isVertical\r\n            ? \"h-full w-2.5 border-l border-l-transparent p-[1px] hover:w-3\"\r\n            : \"w-full h-2.5 border-t border-t-transparent p-[1px] hover:h-3\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        <ScrollAreaPrimitive.ScrollAreaThumb\r\n          className={cn(\r\n            \"relative flex-1 transition-colors duration-150 ease-out rounded-full\",\r\n            \"bg-border hover:bg-border/80\",\r\n          )}\r\n          style={{\r\n            backgroundColor: thumbColor,\r\n            borderRadius: radius,\r\n          }}\r\n        />\r\n      </ScrollAreaPrimitive.ScrollAreaScrollbar>\r\n    )\r\n  },\r\n)\r\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\r\n\r\nexport { ScrollArea, ScrollBar }",
    "language": "tsx"
  },
  "@/registry/ui/select": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\r\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst Select = SelectPrimitive.Root\r\n\r\nconst SelectGroup = SelectPrimitive.Group\r\n\r\nconst SelectValue = SelectPrimitive.Value\r\n\r\nconst SelectTrigger = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n  <SelectPrimitive.Trigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"group flex h-10 w-full items-center justify-between whitespace-nowrap rounded-xl border border-border/60 bg-background px-3.5 py-2.5 text-sm shadow-sm transition-all duration-200 ring-offset-background placeholder:text-muted-foreground hover:border-border/80 hover:shadow focus:outline-none focus:ring-2 focus:ring-ring/50 focus:ring-offset-2 focus:border-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    {children}\r\n    <SelectPrimitive.Icon asChild>\r\n      <ChevronDown className=\"h-4 w-4 text-muted-foreground/70 transition-transform duration-200 group-data-[state=open]:rotate-180\" />\r\n    </SelectPrimitive.Icon>\r\n  </SelectPrimitive.Trigger>\r\n))\r\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\r\n\r\nconst SelectScrollUpButton = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\r\n>(({ className, ...props }, ref) => (\r\n  <SelectPrimitive.ScrollUpButton\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default items-center justify-center py-1.5 text-muted-foreground/70\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <ChevronUp className=\"h-4 w-4\" />\r\n  </SelectPrimitive.ScrollUpButton>\r\n))\r\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\r\n\r\nconst SelectScrollDownButton = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\r\n>(({ className, ...props }, ref) => (\r\n  <SelectPrimitive.ScrollDownButton\r\n    ref={ref}\r\n    className={cn(\r\n      \"flex cursor-default items-center justify-center py-1.5 text-muted-foreground/70\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <ChevronDown className=\"h-4 w-4\" />\r\n  </SelectPrimitive.ScrollDownButton>\r\n))\r\nSelectScrollDownButton.displayName =\r\n  SelectPrimitive.ScrollDownButton.displayName\r\n\r\nconst SelectContent = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\r\n>(({ className, children, position = \"popper\", ...props }, ref) => (\r\n  <SelectPrimitive.Portal>\r\n    <SelectPrimitive.Content\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-2xl border border-border/60 bg-popover/95 backdrop-blur-xl text-popover-foreground shadow-lg transition-all 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 origin-[--radix-select-content-transform-origin]\",\r\n        position === \"popper\" &&\r\n          \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\r\n        className\r\n      )}\r\n      position={position}\r\n      {...props}\r\n    >\r\n      <SelectScrollUpButton />\r\n      <SelectPrimitive.Viewport\r\n        className={cn(\r\n          \"p-1.5\",\r\n          position === \"popper\" &&\r\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\"\r\n        )}\r\n      >\r\n        {children}\r\n      </SelectPrimitive.Viewport>\r\n      <SelectScrollDownButton />\r\n    </SelectPrimitive.Content>\r\n  </SelectPrimitive.Portal>\r\n))\r\nSelectContent.displayName = SelectPrimitive.Content.displayName\r\n\r\nconst SelectLabel = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.Label>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\r\n>(({ className, ...props }, ref) => (\r\n  <SelectPrimitive.Label\r\n    ref={ref}\r\n    className={cn(\"px-2.5 py-1.5 text-sm font-semibold text-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSelectLabel.displayName = SelectPrimitive.Label.displayName\r\n\r\nconst SelectItem = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\r\n>(({ className, children, ...props }, ref) => (\r\n  <SelectPrimitive.Item\r\n    ref={ref}\r\n    className={cn(\r\n      \"relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-2.5 pr-8 text-sm outline-none transition-all duration-200 focus:bg-accent/50 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-40\",\r\n      className\r\n    )}\r\n    {...props}\r\n  >\r\n    <span className=\"absolute right-2.5 flex h-3.5 w-3.5 items-center justify-center\">\r\n      <SelectPrimitive.ItemIndicator>\r\n        <Check className=\"h-4 w-4 text-primary\" />\r\n      </SelectPrimitive.ItemIndicator>\r\n    </span>\r\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\r\n  </SelectPrimitive.Item>\r\n))\r\nSelectItem.displayName = SelectPrimitive.Item.displayName\r\n\r\nconst SelectSeparator = React.forwardRef<\r\n  React.ElementRef<typeof SelectPrimitive.Separator>,\r\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n  <SelectPrimitive.Separator\r\n    ref={ref}\r\n    className={cn(\"-mx-1 my-1.5 h-px bg-border/40\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\r\n\r\nexport {\r\n  Select,\r\n  SelectGroup,\r\n  SelectValue,\r\n  SelectTrigger,\r\n  SelectContent,\r\n  SelectLabel,\r\n  SelectItem,\r\n  SelectSeparator,\r\n  SelectScrollUpButton,\r\n  SelectScrollDownButton,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/separator": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as SeparatorPrimitive from \"@radix-ui/react-separator\"\r\nimport * as React from \"react\"\r\n\r\nconst Separator = React.forwardRef<\r\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & {\r\n    weight?: \"ultralight\" | \"light\" | \"regular\"\r\n  }\r\n>(\r\n  (\r\n    {\r\n      className,\r\n      orientation = \"horizontal\",\r\n      decorative = true,\r\n      weight = \"regular\",\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const weightOpacity = {\r\n      ultralight: \"opacity-[0.60]\",\r\n      light: \"opacity-[0.85]\",\r\n      regular: \"opacity-1\",\r\n    }\r\n    return (\r\n      <SeparatorPrimitive.Root\r\n        ref={ref}\r\n        decorative={decorative}\r\n        orientation={orientation}\r\n        className={cn(\r\n          \"shrink-0 bg-border transition-all\",\r\n          weightOpacity[weight],\r\n          orientation === \"horizontal\" ? \"h-[1.2px] w-full\" : \"h-full w-px\",\r\n          className\r\n        )}\r\n        {...props}\r\n      />\r\n    )\r\n  }\r\n)\r\nSeparator.displayName = SeparatorPrimitive.Root.displayName\r\n\r\nexport { Separator }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/sheet": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\nimport { XIcon } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nconst Sheet = SheetPrimitive.Root\r\n\r\nconst SheetTrigger = SheetPrimitive.Trigger\r\n\r\nconst SheetClose = SheetPrimitive.Close\r\n\r\nconst SheetPortal = SheetPrimitive.Portal\r\n\r\nconst SheetOverlay = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\r\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\r\n>(({ className, ...props }, ref) => (\r\n  <SheetPrimitive.Overlay\r\n    className={cn(\r\n      \"fixed inset-0 z-50 dark:bg-black/20 bg-black/40 backdrop-blur-sm backdrop-filter backdrop-saturate-[180%] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\r\n      className\r\n    )}\r\n    {...props}\r\n    ref={ref}\r\n  />\r\n))\r\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\r\n\r\nconst sheetVariants = cva(\r\n  \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\r\n  {\r\n    variants: {\r\n      side: {\r\n        top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\r\n        bottom:\r\n          \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\r\n        left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\r\n        right:\r\n          \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      side: \"right\",\r\n    },\r\n  }\r\n)\r\n\r\ninterface SheetContentProps\r\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\r\n  VariantProps<typeof sheetVariants> { }\r\n\r\nconst SheetContent = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Content>,\r\n  SheetContentProps\r\n>(({ side = \"right\", className, children, ...props }, ref) => (\r\n  <SheetPortal>\r\n    <SheetOverlay />\r\n    <SheetPrimitive.Content\r\n      ref={ref}\r\n      className={cn(sheetVariants({ side }), className)}\r\n      {...props}\r\n    >\r\n      {children}\r\n      <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\">\r\n        <XIcon className=\"size-4\" />\r\n        <span className=\"sr-only\">Close</span>\r\n      </SheetPrimitive.Close>\r\n    </SheetPrimitive.Content>\r\n  </SheetPortal>\r\n))\r\nSheetContent.displayName = SheetPrimitive.Content.displayName\r\n\r\nconst SheetHeader = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\r\n      \"flex flex-col space-y-2 text-center sm:text-left\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n)\r\nSheetHeader.displayName = \"SheetHeader\"\r\n\r\nconst SheetFooter = ({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) => (\r\n  <div\r\n    className={cn(\r\n      \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n)\r\nSheetFooter.displayName = \"SheetFooter\"\r\n\r\nconst SheetTitle = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Title>,\r\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\r\n>(({ className, ...props }, ref) => (\r\n  <SheetPrimitive.Title\r\n    ref={ref}\r\n    className={cn(\"text-lg font-semibold text-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSheetTitle.displayName = SheetPrimitive.Title.displayName\r\n\r\nconst SheetDescription = React.forwardRef<\r\n  React.ElementRef<typeof SheetPrimitive.Description>,\r\n  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\r\n>(({ className, ...props }, ref) => (\r\n  <SheetPrimitive.Description\r\n    ref={ref}\r\n    className={cn(\"text-sm text-muted-foreground\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSheetDescription.displayName = SheetPrimitive.Description.displayName\r\n\r\nexport {\r\n  Sheet,\r\n  SheetClose,\r\n  SheetContent,\r\n  SheetDescription,\r\n  SheetFooter,\r\n  SheetHeader,\r\n  SheetOverlay,\r\n  SheetPortal,\r\n  SheetTitle,\r\n  SheetTrigger\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/sidebar": {
    "content": "\"use client\"\r\n\r\nimport { Button } from \"@/components/ui/button\"\r\nimport { Input } from \"@/components/ui/input\"\r\nimport { Separator } from \"@/components/ui/separator\"\r\nimport {\r\n  Sheet,\r\n  SheetContent,\r\n  SheetDescription,\r\n  SheetHeader,\r\n  SheetTitle,\r\n} from \"@/components/ui/sheet\"\r\nimport { Skeleton } from \"@/components/ui/skeleton\"\r\nimport {\r\n  Tooltip,\r\n  TooltipContent,\r\n  TooltipProvider,\r\n  TooltipTrigger,\r\n} from \"@/components/ui/tooltip\"\r\nimport { useIsMobile } from \"@/hooks/use-mobile\"\r\nimport { cn } from \"@/lib/utils\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport { VariantProps, cva } from \"class-variance-authority\"\r\nimport { PanelLeft } from \"lucide-react\"\r\nimport * as React from \"react\"\r\n\r\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\r\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\r\nconst SIDEBAR_WIDTH = \"16rem\"\r\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\r\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\r\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\r\n\r\ntype SidebarContextProps = {\r\n  state: \"expanded\" | \"collapsed\"\r\n  open: boolean\r\n  setOpen: (open: boolean) => void\r\n  openMobile: boolean\r\n  setOpenMobile: (open: boolean) => void\r\n  isMobile: boolean\r\n  toggleSidebar: () => void\r\n}\r\n\r\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\r\n\r\nfunction useSidebar() {\r\n  const context = React.useContext(SidebarContext)\r\n  if (!context) {\r\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\r\n  }\r\n\r\n  return context\r\n}\r\n\r\nconst SidebarProvider = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    defaultOpen?: boolean\r\n    open?: boolean\r\n    onOpenChange?: (open: boolean) => void\r\n  }\r\n>(\r\n  (\r\n    {\r\n      defaultOpen = true,\r\n      open: openProp,\r\n      onOpenChange: setOpenProp,\r\n      className,\r\n      style,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const isMobile = useIsMobile()\r\n    const [openMobile, setOpenMobile] = React.useState(false)\r\n\r\n    // This is the internal state of the sidebar.\r\n    // We use openProp and setOpenProp for control from outside the component.\r\n    const [_open, _setOpen] = React.useState(defaultOpen)\r\n    const open = openProp ?? _open\r\n    const setOpen = React.useCallback(\r\n      (value: boolean | ((value: boolean) => boolean)) => {\r\n        const openState = typeof value === \"function\" ? value(open) : value\r\n        if (setOpenProp) {\r\n          setOpenProp(openState)\r\n        } else {\r\n          _setOpen(openState)\r\n        }\r\n\r\n        // This sets the cookie to keep the sidebar state.\r\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\r\n      },\r\n      [setOpenProp, open]\r\n    )\r\n\r\n    // Helper to toggle the sidebar.\r\n    const toggleSidebar = React.useCallback(() => {\r\n      return isMobile\r\n        ? setOpenMobile((open) => !open)\r\n        : setOpen((open) => !open)\r\n    }, [isMobile, setOpen, setOpenMobile])\r\n\r\n    // Adds a keyboard shortcut to toggle the sidebar.\r\n    React.useEffect(() => {\r\n      const handleKeyDown = (event: KeyboardEvent) => {\r\n        if (\r\n          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\r\n          (event.metaKey || event.ctrlKey)\r\n        ) {\r\n          event.preventDefault()\r\n          toggleSidebar()\r\n        }\r\n      }\r\n\r\n      window.addEventListener(\"keydown\", handleKeyDown)\r\n      return () => window.removeEventListener(\"keydown\", handleKeyDown)\r\n    }, [toggleSidebar])\r\n\r\n    // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\r\n    // This makes it easier to style the sidebar with Tailwind classes.\r\n    const state = open ? \"expanded\" : \"collapsed\"\r\n\r\n    const contextValue = React.useMemo<SidebarContextProps>(\r\n      () => ({\r\n        state,\r\n        open,\r\n        setOpen,\r\n        isMobile,\r\n        openMobile,\r\n        setOpenMobile,\r\n        toggleSidebar,\r\n      }),\r\n      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\r\n    )\r\n\r\n    return (\r\n      <SidebarContext.Provider value={contextValue}>\r\n        <TooltipProvider delayDuration={0}>\r\n          <div\r\n            style={\r\n              {\r\n                \"--sidebar-width\": SIDEBAR_WIDTH,\r\n                \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\r\n                ...style,\r\n              } as React.CSSProperties\r\n            }\r\n            className={cn(\r\n              \"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar\",\r\n              className\r\n            )}\r\n            ref={ref}\r\n            {...props}\r\n          >\r\n            {children}\r\n          </div>\r\n        </TooltipProvider>\r\n      </SidebarContext.Provider>\r\n    )\r\n  }\r\n)\r\nSidebarProvider.displayName = \"SidebarProvider\"\r\n\r\nconst Sidebar = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    side?: \"left\" | \"right\"\r\n    variant?: \"sidebar\" | \"floating\" | \"inset\"\r\n    collapsible?: \"offcanvas\" | \"icon\" | \"none\"\r\n  }\r\n>(\r\n  (\r\n    {\r\n      side = \"left\",\r\n      variant = \"sidebar\",\r\n      collapsible = \"offcanvas\",\r\n      className,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\r\n\r\n    if (collapsible === \"none\") {\r\n      return (\r\n        <div\r\n          className={cn(\r\n            \"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground\",\r\n            className\r\n          )}\r\n          ref={ref}\r\n          {...props}\r\n        >\r\n          {children}\r\n        </div>\r\n      )\r\n    }\r\n\r\n    if (isMobile) {\r\n      return (\r\n        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\r\n          <SheetContent\r\n            data-sidebar=\"sidebar\"\r\n            data-mobile=\"true\"\r\n            className=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\r\n            style={\r\n              {\r\n                \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\r\n              } as React.CSSProperties\r\n            }\r\n            side={side}\r\n          >\r\n            <SheetHeader className=\"sr-only\">\r\n              <SheetTitle>Sidebar</SheetTitle>\r\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\r\n            </SheetHeader>\r\n            <div className=\"flex h-full w-full flex-col\">{children}</div>\r\n          </SheetContent>\r\n        </Sheet>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className=\"group peer hidden text-sidebar-foreground md:block\"\r\n        data-state={state}\r\n        data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\r\n        data-variant={variant}\r\n        data-side={side}\r\n      >\r\n        {/* This is what handles the sidebar gap on desktop */}\r\n        <div\r\n          className={cn(\r\n            \"relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear\",\r\n            \"group-data-[collapsible=offcanvas]:w-0\",\r\n            \"group-data-[side=right]:rotate-180\",\r\n            variant === \"floating\" || variant === \"inset\"\r\n              ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]\"\r\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon]\"\r\n          )}\r\n        />\r\n        <div\r\n          className={cn(\r\n            \"fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex\",\r\n            side === \"left\"\r\n              ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\r\n              : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\r\n            // Adjust the padding for floating and inset variants.\r\n            variant === \"floating\" || variant === \"inset\"\r\n              ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]\"\r\n              : \"group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l\",\r\n            className\r\n          )}\r\n          {...props}\r\n        >\r\n          <div\r\n            data-sidebar=\"sidebar\"\r\n            className=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\r\n          >\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    )\r\n  }\r\n)\r\nSidebar.displayName = \"Sidebar\"\r\n\r\nconst SidebarTrigger = React.forwardRef<\r\n  React.ElementRef<typeof Button>,\r\n  React.ComponentProps<typeof Button>\r\n>(({ className, onClick, ...props }, ref) => {\r\n  const { toggleSidebar } = useSidebar()\r\n\r\n  return (\r\n    <Button\r\n      ref={ref}\r\n      data-sidebar=\"trigger\"\r\n      variant=\"ghost\"\r\n      size=\"icon\"\r\n      className={cn(\"h-7 w-7\", className)}\r\n      onClick={(event) => {\r\n        onClick?.(event)\r\n        toggleSidebar()\r\n      }}\r\n      {...props}\r\n    >\r\n      <PanelLeft />\r\n      <span className=\"sr-only\">Toggle Sidebar</span>\r\n    </Button>\r\n  )\r\n})\r\nSidebarTrigger.displayName = \"SidebarTrigger\"\r\n\r\nconst SidebarRail = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\">\r\n>(({ className, ...props }, ref) => {\r\n  const { toggleSidebar } = useSidebar()\r\n\r\n  return (\r\n    <button\r\n      ref={ref}\r\n      data-sidebar=\"rail\"\r\n      aria-label=\"Toggle Sidebar\"\r\n      tabIndex={-1}\r\n      onClick={toggleSidebar}\r\n      title=\"Toggle Sidebar\"\r\n      className={cn(\r\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\r\n        \"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize\",\r\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\r\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\r\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\r\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarRail.displayName = \"SidebarRail\"\r\n\r\nconst SidebarInset = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"main\">\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <main\r\n      ref={ref}\r\n      className={cn(\r\n        \"relative flex w-full flex-1 flex-col bg-background\",\r\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarInset.displayName = \"SidebarInset\"\r\n\r\nconst SidebarInput = React.forwardRef<\r\n  React.ElementRef<typeof Input>,\r\n  React.ComponentProps<typeof Input>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <Input\r\n      ref={ref}\r\n      data-sidebar=\"input\"\r\n      className={cn(\r\n        \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarInput.displayName = \"SidebarInput\"\r\n\r\nconst SidebarHeader = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\">\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"header\"\r\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarHeader.displayName = \"SidebarHeader\"\r\n\r\nconst SidebarFooter = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\">\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"footer\"\r\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarFooter.displayName = \"SidebarFooter\"\r\n\r\nconst SidebarSeparator = React.forwardRef<\r\n  React.ElementRef<typeof Separator>,\r\n  React.ComponentProps<typeof Separator>\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <Separator\r\n      ref={ref}\r\n      data-sidebar=\"separator\"\r\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarSeparator.displayName = \"SidebarSeparator\"\r\n\r\nconst SidebarContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\">\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"content\"\r\n      className={cn(\r\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarContent.displayName = \"SidebarContent\"\r\n\r\nconst SidebarGroup = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\">\r\n>(({ className, ...props }, ref) => {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"group\"\r\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarGroup.displayName = \"SidebarGroup\"\r\n\r\nconst SidebarGroupLabel = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & { asChild?: boolean }\r\n>(({ className, asChild = false, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"div\"\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"group-label\"\r\n      className={cn(\r\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\r\n\r\nconst SidebarGroupAction = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & { asChild?: boolean }\r\n>(({ className, asChild = false, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"button\"\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"group-action\"\r\n      className={cn(\r\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 after:md:hidden\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\r\n\r\nconst SidebarGroupContent = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\">\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    data-sidebar=\"group-content\"\r\n    className={cn(\"w-full text-sm\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\r\n\r\nconst SidebarMenu = React.forwardRef<\r\n  HTMLUListElement,\r\n  React.ComponentProps<\"ul\">\r\n>(({ className, ...props }, ref) => (\r\n  <ul\r\n    ref={ref}\r\n    data-sidebar=\"menu\"\r\n    className={cn(\"flex w-full min-w-0 flex-col gap-1\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSidebarMenu.displayName = \"SidebarMenu\"\r\n\r\nconst SidebarMenuItem = React.forwardRef<\r\n  HTMLLIElement,\r\n  React.ComponentProps<\"li\">\r\n>(({ className, ...props }, ref) => (\r\n  <li\r\n    ref={ref}\r\n    data-sidebar=\"menu-item\"\r\n    className={cn(\"group/menu-item relative\", className)}\r\n    {...props}\r\n  />\r\n))\r\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\r\n\r\nconst sidebarMenuButtonVariants = cva(\r\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none 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\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\r\n        outline:\r\n          \"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))]\",\r\n      },\r\n      size: {\r\n        default: \"h-8 text-sm\",\r\n        sm: \"h-7 text-xs\",\r\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:!p-0\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nconst SidebarMenuButton = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & {\r\n    asChild?: boolean\r\n    isActive?: boolean\r\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\r\n  } & VariantProps<typeof sidebarMenuButtonVariants>\r\n>(\r\n  (\r\n    {\r\n      asChild = false,\r\n      isActive = false,\r\n      variant = \"default\",\r\n      size = \"default\",\r\n      tooltip,\r\n      className,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const Comp = asChild ? Slot : \"button\"\r\n    const { isMobile, state } = useSidebar()\r\n\r\n    const button = (\r\n      <Comp\r\n        ref={ref}\r\n        data-sidebar=\"menu-button\"\r\n        data-size={size}\r\n        data-active={isActive}\r\n        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\r\n        {...props}\r\n      />\r\n    )\r\n\r\n    if (!tooltip) {\r\n      return button\r\n    }\r\n\r\n    if (typeof tooltip === \"string\") {\r\n      tooltip = {\r\n        children: tooltip,\r\n      }\r\n    }\r\n\r\n    return (\r\n      <Tooltip>\r\n        <TooltipTrigger asChild>{button}</TooltipTrigger>\r\n        <TooltipContent\r\n          side=\"right\"\r\n          align=\"center\"\r\n          hidden={state !== \"collapsed\" || isMobile}\r\n          {...tooltip}\r\n        />\r\n      </Tooltip>\r\n    )\r\n  }\r\n)\r\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\r\n\r\nconst SidebarMenuAction = React.forwardRef<\r\n  HTMLButtonElement,\r\n  React.ComponentProps<\"button\"> & {\r\n    asChild?: boolean\r\n    showOnHover?: boolean\r\n  }\r\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"button\"\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"menu-action\"\r\n      className={cn(\r\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\r\n        // Increases the hit area of the button on mobile.\r\n        \"after:absolute after:-inset-2 after:md:hidden\",\r\n        \"peer-data-[size=sm]/menu-button:top-1\",\r\n        \"peer-data-[size=default]/menu-button:top-1.5\",\r\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        showOnHover &&\r\n        \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\r\n\r\nconst SidebarMenuBadge = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\">\r\n>(({ className, ...props }, ref) => (\r\n  <div\r\n    ref={ref}\r\n    data-sidebar=\"menu-badge\"\r\n    className={cn(\r\n      \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground\",\r\n      \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\r\n      \"peer-data-[size=sm]/menu-button:top-1\",\r\n      \"peer-data-[size=default]/menu-button:top-1.5\",\r\n      \"peer-data-[size=lg]/menu-button:top-2.5\",\r\n      \"group-data-[collapsible=icon]:hidden\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\r\n\r\nconst SidebarMenuSkeleton = React.forwardRef<\r\n  HTMLDivElement,\r\n  React.ComponentProps<\"div\"> & {\r\n    showIcon?: boolean\r\n  }\r\n>(({ className, showIcon = false, ...props }, ref) => {\r\n  // Random width between 50 to 90%.\r\n  const width = React.useMemo(() => {\r\n    return `${Math.floor(Math.random() * 40) + 50}%`\r\n  }, [])\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      data-sidebar=\"menu-skeleton\"\r\n      className={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", className)}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <Skeleton\r\n          className=\"size-4 rounded-md\"\r\n          data-sidebar=\"menu-skeleton-icon\"\r\n        />\r\n      )}\r\n      <Skeleton\r\n        className=\"h-4 max-w-[--skeleton-width] flex-1\"\r\n        data-sidebar=\"menu-skeleton-text\"\r\n        style={\r\n          {\r\n            \"--skeleton-width\": width,\r\n          } as React.CSSProperties\r\n        }\r\n      />\r\n    </div>\r\n  )\r\n})\r\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\r\n\r\nconst SidebarMenuSub = React.forwardRef<\r\n  HTMLUListElement,\r\n  React.ComponentProps<\"ul\">\r\n>(({ className, ...props }, ref) => (\r\n  <ul\r\n    ref={ref}\r\n    data-sidebar=\"menu-sub\"\r\n    className={cn(\r\n      \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\r\n      \"group-data-[collapsible=icon]:hidden\",\r\n      className\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nSidebarMenuSub.displayName = \"SidebarMenuSub\"\r\n\r\nconst SidebarMenuSubItem = React.forwardRef<\r\n  HTMLLIElement,\r\n  React.ComponentProps<\"li\">\r\n>(({ ...props }, ref) => <li ref={ref} {...props} />)\r\nSidebarMenuSubItem.displayName = \"SidebarMenuSubItem\"\r\n\r\nconst SidebarMenuSubButton = React.forwardRef<\r\n  HTMLAnchorElement,\r\n  React.ComponentProps<\"a\"> & {\r\n    asChild?: boolean\r\n    size?: \"sm\" | \"md\"\r\n    isActive?: boolean\r\n  }\r\n>(({ asChild = false, size = \"md\", isActive, className, ...props }, ref) => {\r\n  const Comp = asChild ? Slot : \"a\"\r\n\r\n  return (\r\n    <Comp\r\n      ref={ref}\r\n      data-sidebar=\"menu-sub-button\"\r\n      data-size={size}\r\n      data-active={isActive}\r\n      className={cn(\r\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\r\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\r\n        size === \"sm\" && \"text-xs\",\r\n        size === \"md\" && \"text-sm\",\r\n        \"group-data-[collapsible=icon]:hidden\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n})\r\nSidebarMenuSubButton.displayName = \"SidebarMenuSubButton\"\r\n\r\nexport {\r\n  Sidebar,\r\n  SidebarContent,\r\n  SidebarFooter,\r\n  SidebarGroup,\r\n  SidebarGroupAction,\r\n  SidebarGroupContent,\r\n  SidebarGroupLabel,\r\n  SidebarHeader,\r\n  SidebarInput,\r\n  SidebarInset,\r\n  SidebarMenu,\r\n  SidebarMenuAction,\r\n  SidebarMenuBadge,\r\n  SidebarMenuButton,\r\n  SidebarMenuItem,\r\n  SidebarMenuSkeleton,\r\n  SidebarMenuSub,\r\n  SidebarMenuSubButton,\r\n  SidebarMenuSubItem,\r\n  SidebarProvider,\r\n  SidebarRail,\r\n  SidebarSeparator,\r\n  SidebarTrigger,\r\n  useSidebar\r\n}",
    "language": "tsx"
  },
  "@/registry/ui/skeleton": {
    "content": "import { cn } from \"@/lib/utils\"\r\nimport { motion } from \"framer-motion\"\r\n\r\nfunction Skeleton({\r\n  className,\r\n  ...props\r\n}: React.HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <div\r\n      className={cn(\"relative overflow-hidden rounded-xl bg-muted/60\", className)}\r\n      {...props}\r\n    >\r\n      <motion.div\r\n        aria-hidden\r\n        className=\"pointer-events-none absolute inset-y-0 -left-1/3 w-2/3 rotate-6 -skew-x-12 bg-gradient-to-r from-transparent via-white/60 to-transparent dark:via-white/30 blur-[2px] opacity-80\"\r\n        initial={{ x: \"-160%\" }}\r\n        animate={{ x: [\"-160%\", \"160%\"] }}\r\n        transition={{ duration: 1.25, repeat: Infinity, ease: \"linear\" }}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport { Skeleton }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/slider": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as SliderPrimitive from \"@radix-ui/react-slider\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Slider({\r\n  className,\r\n  defaultValue,\r\n  value,\r\n  min = 0,\r\n  max = 100,\r\n  ...props\r\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\r\n  const _values = React.useMemo(\r\n    () =>\r\n      Array.isArray(value)\r\n        ? value\r\n        : Array.isArray(defaultValue)\r\n          ? defaultValue\r\n          : [min, max],\r\n    [value, defaultValue, min, max]\r\n  )\r\n\r\n  return (\r\n    <SliderPrimitive.Root\r\n      data-slot=\"slider\"\r\n      defaultValue={defaultValue}\r\n      value={value}\r\n      min={min}\r\n      max={max}\r\n      className={cn(\r\n        \"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\",\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      <SliderPrimitive.Track\r\n        data-slot=\"slider-track\"\r\n        className={cn(\r\n          \"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\"\r\n        )}\r\n      >\r\n        <SliderPrimitive.Range\r\n          data-slot=\"slider-range\"\r\n          className={cn(\r\n            \"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\r\n          )}\r\n        />\r\n      </SliderPrimitive.Track>\r\n      {Array.from({ length: _values.length }, (_, index) => (\r\n        <SliderPrimitive.Thumb\r\n          data-slot=\"slider-thumb\"\r\n          key={index}\r\n          className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\r\n        />\r\n      ))}\r\n    </SliderPrimitive.Root>\r\n  )\r\n}\r\n\r\nexport { Slider }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/sonner": {
    "content": "\"use client\"\r\n\r\nimport { SuccessIcon } from \"@/components/icons/success-icon\"\r\nimport { CircleAlert, Info, X } from \"lucide-react\"\r\nimport { useTheme } from \"next-themes\"\r\nimport React from \"react\"\r\nimport { Toaster as Sonner } from \"sonner\"\r\n\r\ntype ToasterProps = React.ComponentProps<typeof Sonner>\r\n\r\nconst Toaster = ({ ...props }: ToasterProps) => {\r\n  const { theme = \"system\" } = useTheme()\r\n\r\n  return (\r\n    <Sonner\r\n      theme={theme as ToasterProps[\"theme\"]}\r\n      className=\"toaster group\"\r\n      toastOptions={{\r\n        classNames: {\r\n          toast:\r\n            \"group toast group-[.toaster]:bg-background/70 backdrop-blur-md group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-md rounded-2xl dark:backdrop-blur-lg group-[.toaster]:border-0 group-[.toaster]:shadow-xl\",\r\n          title: \" text-sm font-medium tracking-tight\",\r\n          description:\r\n            \"group-[.toast]:text-muted-foreground text-xs font-normal leading-5\",\r\n          actionButton:\r\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground rounded-full px-4 py-1.5 text-xs font-medium transition-colors hover:opacity-90\",\r\n          cancelButton:\r\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground rounded-full px-4 py-1.5 text-xs font-medium transition-colors hover:opacity-80\",\r\n          success: \"!bg-green-50/95 dark:!bg-green-950/30 !border-green-200/50 dark:!border-green-800/30\",\r\n          error: \"!bg-red-50/95 dark:!bg-red-950/40 !border-red-200/50 dark:!border-red-800/30\",\r\n          warning: \"!bg-amber-50/90 dark:!bg-amber-950/30 !border-amber-200/50 dark:!border-amber-800/30\",\r\n          info: \"!bg-blue-50/90 dark:!bg-blue-950/30 !border-blue-200/50 dark:!border-blue-800/30\",\r\n          loading: \"group-[.toast]:text-muted-foreground !bg-slate-50/90 dark:!bg-slate-950/30\",\r\n        },\r\n        duration: 4000,\r\n      }}\r\n      closeButton\r\n      icons={{\r\n        success: (\r\n          <SuccessIcon\r\n            size={20}\r\n            strokeWidth={6}\r\n            className=\"text-green-600 flex-shrink-0\"\r\n          />\r\n        ),\r\n        error: (\r\n          <X\r\n            strokeWidth={2.5}\r\n            absoluteStrokeWidth\r\n            className=\"h-5 w-5 text-red-500\"\r\n          />\r\n        ),\r\n        warning: (\r\n          <CircleAlert\r\n            strokeWidth={2.5}\r\n            absoluteStrokeWidth\r\n            className=\"h-5 w-5 text-amber-500\"\r\n          />\r\n        ),\r\n        info: (\r\n          <Info\r\n            strokeWidth={2.5}\r\n            absoluteStrokeWidth\r\n            className=\"h-5 w-5 text-blue-500\"\r\n          />\r\n        ),\r\n      }}\r\n      expand={false}\r\n      position=\"top-center\"\r\n      visibleToasts={3}\r\n      gap={8}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Toaster }\r\n\r\n",
    "language": "tsx"
  },
  "@/registry/ui/step": {
    "content": "\"use client\"\r\n\r\nimport { cn, convertToArabicNumerals } from \"@/lib/utils\"\r\nimport type { StepItemProps, StepProps } from \"@/types/components\"\r\nimport { useLocale } from \"next-intl\"\r\nimport { Children, type PropsWithChildren } from \"react\"\r\n\r\nexport function Step({ children, className }: PropsWithChildren<StepProps>) {\r\n    const length = Children.count(children)\r\n    const locale = useLocale()\r\n\r\n    return (\r\n        <div className={cn(\"flex flex-col w-full relative\", className)}>\r\n            {Children.map(children, (child, index) => (\r\n                <div className=\"relative ltr:pl-10 rtl:pr-10\">\r\n                    {index < length - 1 && (\r\n                        <span className=\"absolute ltr:left-4 rtl:right-4 top-8 w-px h-full bg-zinc-200 dark:bg-zinc-700\" />\r\n                    )}\r\n                    <span className=\"absolute ltr:left-0 rtl:right-0 top-1 w-8 h-8 flex items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 text-zinc-800 dark:text-zinc-200 text-sm font-medium\">\r\n                        {locale === \"ar\" ? convertToArabicNumerals(index + 1) : (index + 1).toString()}\r\n                    </span>\r\n                    <div className=\"pb-8\">{child}</div>\r\n                </div>\r\n            ))}\r\n        </div>\r\n    )\r\n}\r\n\r\nexport function StepItem({ children, title, className }: StepItemProps) {\r\n    return (\r\n        <div className={cn(\"space-y-3\", className)}>\r\n            {title && <h3 className=\"text-base md:text-lg font-medium text-zinc-900 dark:text-zinc-50\">{title}</h3>}\r\n            <div className=\"text-sm md:text-base text-zinc-600 dark:text-zinc-300 leading-relaxed !-mt-0\">\r\n                <div className=\"space-y-2\">{children}</div>\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/switch": {
    "content": "\"use client\";\r\n\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n  Tooltip,\r\n  TooltipContent,\r\n  TooltipProvider,\r\n  TooltipTrigger,\r\n} from \"@/components/ui/tooltip\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\";\r\nimport gsap from \"gsap\";\r\nimport * as React from \"react\";\r\n\r\ninterface SwitchProps\r\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  label?: string;\r\n  tooltip?: string;\r\n}\r\n\r\nconst sizeVariants = {\r\n  sm: {\r\n    track: \"h-7 w-11\",\r\n    thumb: { width: 20, height: 20 },\r\n    expandedWidth: 24,\r\n    padding: 2,\r\n    fontSize: \"text-sm\",\r\n    offsetX: 3,\r\n  },\r\n  md: {\r\n    track: \"h-8 w-[3.25rem]\",\r\n    thumb: { width: 24, height: 24 },\r\n    expandedWidth: 28,\r\n    padding: 3,\r\n    fontSize: \"text-base\",\r\n    offsetX: 3,\r\n  },\r\n  lg: {\r\n    track: \"h-10 w-16\",\r\n    thumb: { width: 28, height: 28 },\r\n    expandedWidth: 32,\r\n    padding: 3,\r\n    fontSize: \"text-lg\",\r\n    offsetX: 3,\r\n  },\r\n};\r\n\r\nexport const Switch = React.forwardRef<\r\n  React.ElementRef<typeof SwitchPrimitive.Root>,\r\n  SwitchProps\r\n>(({ size = \"md\", label, tooltip, className, ...props }, ref) => {\r\n  const thumbRef = React.useRef<HTMLSpanElement>(null);\r\n  const trackRef = React.useRef<HTMLSpanElement>(null);\r\n  const id = React.useId();\r\n  const [showTooltip, setShowTooltip] = React.useState(false);\r\n  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);\r\n  const isInitializedRef = React.useRef(false);\r\n  const [internalChecked, setInternalChecked] = React.useState(\r\n    props.defaultChecked || false\r\n  );\r\n\r\n  const config = sizeVariants[size];\r\n  const isControlled = props.checked !== undefined;\r\n  const isChecked = isControlled ? props.checked : internalChecked;\r\n\r\n  React.useEffect(() => {\r\n    if (!thumbRef.current || !trackRef.current) return;\r\n\r\n    const thumb = thumbRef.current;\r\n    const track = trackRef.current;\r\n\r\n    if (!isInitializedRef.current) {\r\n      const trackWidth = track.offsetWidth;\r\n      const thumbWidth = config.thumb.width;\r\n      const maxX = trackWidth - thumbWidth - config.padding * 2;\r\n\r\n      // Initial setup without animation\r\n      gsap.set(thumb, {\r\n        x: isChecked ? maxX : config.offsetX,\r\n        width: config.thumb.width,\r\n        height: config.thumb.height,\r\n      });\r\n\r\n      gsap.set(track, {\r\n        backgroundColor: isChecked ? \"rgb(0, 0, 0)\" : \"rgb(209, 213, 219)\",\r\n      });\r\n\r\n      isInitializedRef.current = true;\r\n    }\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, []);\r\n  React.useEffect(() => {\r\n    if (!isInitializedRef.current || !thumbRef.current || !trackRef.current)\r\n      return;\r\n\r\n    const thumb = thumbRef.current;\r\n    const track = trackRef.current;\r\n    const trackWidth = track.offsetWidth;\r\n    const thumbWidth = config.thumb.width;\r\n    const maxX = trackWidth - thumbWidth - config.padding * 2;\r\n    const tl = gsap.timeline();\r\n    tl.to(thumb, {\r\n      width: config.expandedWidth,\r\n      transformOrigin: isChecked ? \"right\" : \"left\",\r\n      duration: 0.3,\r\n      ease: \"power2.out\",\r\n    });\r\n\r\n    tl.to(\r\n      thumb,\r\n      {\r\n        x: isChecked ? maxX : config.offsetX,\r\n        duration: 0.25,\r\n        ease: \"power2.inOut\",\r\n      },\r\n      \"-=0.05\"\r\n    );\r\n    tl.to(\r\n      track,\r\n      {\r\n        backgroundColor: isChecked ? \"rgb(0, 0, 0)\" : \"rgb(209, 213, 219)\",\r\n        duration: 0.3,\r\n        ease: \"power2.inOut\",\r\n      },\r\n      \"-=0.25\"\r\n    );\r\n\r\n    tl.to(\r\n      thumb,\r\n      {\r\n        width: config.thumb.width,\r\n        transformOrigin: isChecked ? \"left\" : \"right\",\r\n        duration: 0.3,\r\n        ease: \"power2.out\",\r\n      },\r\n      \"-=0.25\"\r\n    );\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [isChecked]);\r\n\r\n  const handleCheckedChange = (checked: boolean) => {\r\n    if (!isControlled) {\r\n      setInternalChecked(checked);\r\n    }\r\n    props.onCheckedChange?.(checked);\r\n  };\r\n\r\n  const handleMouseEnter = () => {\r\n    if (!tooltip || props.disabled) return;\r\n    timeoutRef.current = setTimeout(() => setShowTooltip(true), 500);\r\n  };\r\n\r\n  const handleMouseLeave = () => {\r\n    if (timeoutRef.current) {\r\n      clearTimeout(timeoutRef.current);\r\n    }\r\n    setShowTooltip(false);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    return () => {\r\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const SwitchComponent = (\r\n    <SwitchPrimitive.Root\r\n      ref={ref}\r\n      id={id}\r\n      checked={isChecked}\r\n      onCheckedChange={handleCheckedChange}\r\n      className={cn(\r\n        \"relative inline-flex items-center rounded-full\",\r\n        \"focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2\",\r\n        \"dark:focus-visible:ring-white\",\r\n        \"transition-opacity duration-200\",\r\n        config.track,\r\n        props.disabled\r\n          ? \"opacity-50 cursor-not-allowed\"\r\n          : \"cursor-pointer hover:opacity-90\",\r\n        className\r\n      )}\r\n      onMouseEnter={handleMouseEnter}\r\n      onMouseLeave={handleMouseLeave}\r\n      disabled={props.disabled}\r\n      required={props.required}\r\n      name={props.name}\r\n      value={props.value}\r\n    >\r\n      <span\r\n        ref={trackRef}\r\n        className=\"absolute inset-0 rounded-full border border-black/5 shadow-inner dark:border-white/5\"\r\n        style={{\r\n          backgroundColor: isChecked ? \"rgb(0, 0, 0)\" : \"rgb(209, 213, 219)\",\r\n          padding: `${config.padding}px`,\r\n          willChange: \"transform, background-color\",\r\n        }}\r\n      />\r\n      <span\r\n        ref={thumbRef}\r\n        className=\"relative block rounded-full bg-white shadow-lg border border-transparent dark:bg-black dark:border-white/10 pointer-events-none\"\r\n        style={{\r\n          width: config.thumb.width,\r\n          height: config.thumb.height,\r\n          touchAction: \"none\",\r\n          willChange: \"transform, width\",\r\n        }}\r\n      />\r\n    </SwitchPrimitive.Root>\r\n  );\r\n\r\n  return (\r\n    <div className=\"inline-flex items-center gap-3\">\r\n      <TooltipProvider>\r\n        {tooltip ? (\r\n          <Tooltip open={showTooltip} onOpenChange={setShowTooltip}>\r\n            <TooltipTrigger asChild>{SwitchComponent}</TooltipTrigger>\r\n            <TooltipContent\r\n              side=\"top\"\r\n              align=\"center\"\r\n              className=\"bg-gray-900 text-white text-xs py-1 px-2 rounded-md shadow-lg dark:bg-gray-100 dark:text-black\"\r\n            >\r\n              {tooltip}\r\n            </TooltipContent>\r\n          </Tooltip>\r\n        ) : (\r\n          SwitchComponent\r\n        )}\r\n      </TooltipProvider>\r\n      {label && (\r\n        <Label\r\n          htmlFor={id}\r\n          className={cn(\r\n            \"font-medium text-gray-700 dark:text-gray-300 select-none\",\r\n            config.fontSize,\r\n            props.disabled\r\n              ? \"opacity-50 cursor-not-allowed\"\r\n              : \"cursor-pointer hover:text-gray-900 dark:hover:text-gray-100\"\r\n          )}\r\n        >\r\n          {label}\r\n        </Label>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\nSwitch.displayName = \"Switch\";",
    "language": "tsx"
  },
  "@/registry/ui/table": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"table-container\"\r\n      className=\"relative w-full overflow-x-auto\"\r\n    >\r\n      <table\r\n        data-slot=\"table\"\r\n        className={cn(\"w-full caption-bottom text-sm\", className)}\r\n        {...props}\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\r\n  return (\r\n    <thead\r\n      data-slot=\"table-header\"\r\n      className={cn(\"[&_tr]:border-b\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\r\n  return (\r\n    <tbody\r\n      data-slot=\"table-body\"\r\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\r\n  return (\r\n    <tfoot\r\n      data-slot=\"table-footer\"\r\n      className={cn(\r\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\r\n  return (\r\n    <tr\r\n      data-slot=\"table-row\"\r\n      className={cn(\r\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\r\n  return (\r\n    <th\r\n      data-slot=\"table-head\"\r\n      className={cn(\r\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\r\n  return (\r\n    <td\r\n      data-slot=\"table-cell\"\r\n      className={cn(\r\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction TableCaption({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"caption\">) {\r\n  return (\r\n    <caption\r\n      data-slot=\"table-caption\"\r\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Table,\r\n  TableHeader,\r\n  TableBody,\r\n  TableFooter,\r\n  TableHead,\r\n  TableRow,\r\n  TableCell,\r\n  TableCaption,\r\n}\r\n",
    "language": "tsx"
  },
  "@/registry/ui/tabs": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\r\nimport { AnimatePresence, motion } from \"framer-motion\"\r\nimport * as React from \"react\"\r\n\r\nconst TabsContext = React.createContext<{\r\n  orientation?: \"horizontal\" | \"vertical\"\r\n  value?: string\r\n}>({})\r\n\r\nconst Tabs = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\r\n    orientation?: \"horizontal\" | \"vertical\"\r\n  }\r\n>(({ className, orientation = \"horizontal\", ...props }, ref) => {\r\n  const [currentValue, setCurrentValue] = React.useState(props.defaultValue || props.value)\r\n\r\n  const handleValueChange = (value: string) => {\r\n    setCurrentValue(value)\r\n    props.onValueChange?.(value)\r\n  }\r\n\r\n  return (\r\n    <TabsContext.Provider value={{ orientation, value: currentValue }}>\r\n      <TabsPrimitive.Root\r\n        ref={ref}\r\n        orientation={orientation}\r\n        className={cn(\"flex gap-2\", orientation === \"horizontal\" ? \"flex-col\" : \"flex-row\", className)}\r\n        onValueChange={handleValueChange}\r\n        {...props}\r\n      />\r\n    </TabsContext.Provider>\r\n  )\r\n})\r\nTabs.displayName = TabsPrimitive.Root.displayName\r\n\r\nconst TabsList = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.List>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\r\n>(({ className, children, ...props }, ref) => {\r\n  const { orientation, value } = React.useContext(TabsContext)\r\n  const containerRef = React.useRef<HTMLDivElement>(null)\r\n  const [activeStyle, setActiveStyle] = React.useState({\r\n    left: \"0px\",\r\n    top: \"0px\",\r\n    width: \"0px\",\r\n    height: \"0px\",\r\n  })\r\n\r\n  const updateActiveStyle = React.useCallback(() => {\r\n    if (!containerRef.current || !value) return\r\n\r\n    const activeTab = containerRef.current.querySelector('[data-state=\"active\"]') as HTMLElement\r\n    if (!activeTab) return\r\n\r\n    const containerRect = containerRef.current.getBoundingClientRect()\r\n    const tabRect = activeTab.getBoundingClientRect()\r\n\r\n    if (orientation === \"horizontal\") {\r\n      setActiveStyle({\r\n        left: `${tabRect.left - containerRect.left}px`,\r\n        top: \"4px\",\r\n        width: `${tabRect.width}px`,\r\n        height: \"calc(100% - 8px)\",\r\n      })\r\n    } else {\r\n      setActiveStyle({\r\n        left: \"4px\",\r\n        top: `${tabRect.top - containerRect.top}px`,\r\n        width: \"calc(100% - 8px)\",\r\n        height: `${tabRect.height}px`,\r\n      })\r\n    }\r\n  }, [orientation, value])\r\n\r\n  React.useEffect(() => {\r\n    const timeoutId = setTimeout(updateActiveStyle, 0)\r\n    return () => clearTimeout(timeoutId)\r\n  }, [updateActiveStyle, value])\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      requestAnimationFrame(updateActiveStyle)\r\n    }\r\n\r\n    window.addEventListener(\"resize\", handleResize)\r\n\r\n    const resizeObserver = new ResizeObserver(() => {\r\n      requestAnimationFrame(updateActiveStyle)\r\n    })\r\n\r\n    if (containerRef.current) {\r\n      resizeObserver.observe(containerRef.current)\r\n    }\r\n\r\n    return () => {\r\n      window.removeEventListener(\"resize\", handleResize)\r\n      resizeObserver.disconnect()\r\n    }\r\n  }, [updateActiveStyle])\r\n  React.useEffect(() => {\r\n    if (!containerRef.current) return\r\n\r\n    const observer = new MutationObserver(() => {\r\n      requestAnimationFrame(updateActiveStyle)\r\n    })\r\n\r\n    observer.observe(containerRef.current, {\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n      attributeFilter: [\"data-state\"],\r\n    })\r\n\r\n    return () => observer.disconnect()\r\n  }, [updateActiveStyle])\r\n\r\n  return (\r\n    <TabsPrimitive.List\r\n      ref={(el) => {\r\n        if (typeof ref === \"function\") ref(el)\r\n        else if (ref) ref.current = el\r\n        containerRef.current = el\r\n      }}\r\n      className={cn(\r\n        \"relative bg-muted py-1 px-1 rounded-[7px] inline-flex items-center justify-center\",\r\n        orientation === \"horizontal\" ? \"flex-row h-9\" : \"flex-col h-fit w-fit\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    >\r\n      {/* Animated indicator */}\r\n      <motion.div\r\n        className=\"absolute rounded-[6px] bg-background shadow-sm border-none z-0\"\r\n        animate={activeStyle}\r\n        transition={{\r\n          type: \"spring\",\r\n          stiffness: 300,\r\n          damping: 30,\r\n        }}\r\n        layout\r\n      />\r\n      {children}\r\n    </TabsPrimitive.List>\r\n  )\r\n})\r\nTabsList.displayName = TabsPrimitive.List.displayName\r\n\r\nconst TabsTrigger = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.Trigger>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n  <TabsPrimitive.Trigger\r\n    ref={ref}\r\n    className={cn(\r\n      \"inline-flex items-center justify-center whitespace-nowrap rounded-[7px] px-3.5 py-1.5\",\r\n      \"text-sm font-medium\",\r\n      \"relative z-10\",\r\n      \"data-[state=active]:text-foreground data-[state=active]:font-semibold data-[state=inactive]:text-muted-foreground\",\r\n      \"hover:text-foreground\",\r\n      \"disabled:pointer-events-none disabled:opacity-50\",\r\n      \"transition-colors duration-200 ease-in-out\",\r\n      className,\r\n    )}\r\n    {...props}\r\n  />\r\n))\r\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\r\n\r\nconst TabsContent = React.forwardRef<\r\n  React.ElementRef<typeof TabsPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\r\n>(({ className, children, ...props }, ref) => {\r\n  const { orientation } = React.useContext(TabsContext)\r\n\r\n  return (\r\n    <TabsPrimitive.Content ref={ref} className={cn(\"mt-3\", className)} {...props}>\r\n      {children}\r\n    </TabsPrimitive.Content >\r\n  )\r\n})\r\nTabsContent.displayName = TabsPrimitive.Content.displayName\r\n\r\nexport { Tabs, TabsContent, TabsList, TabsTrigger }",
    "language": "tsx"
  },
  "@/registry/ui/textarea": {
    "content": "import * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\r\n  return (\r\n    <textarea\r\n      data-slot=\"textarea\"\r\n      className={cn(\r\n        \"border-input placeholder: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 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Textarea }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/toggle-group": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\r\nimport { type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport { toggleVariants } from \"@/components/ui/toggle\"\r\n\r\nconst ToggleGroupContext = React.createContext<\r\n  VariantProps<typeof toggleVariants>\r\n>({\r\n  size: \"default\",\r\n  variant: \"default\",\r\n})\r\n\r\nconst ToggleGroup = React.forwardRef<\r\n  React.ElementRef<typeof ToggleGroupPrimitive.Root>,\r\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\r\n    VariantProps<typeof toggleVariants>\r\n>(({ className, variant, size, children, ...props }, ref) => (\r\n  <ToggleGroupPrimitive.Root\r\n    ref={ref}\r\n    className={cn(\"flex items-center justify-center gap-1\", className)}\r\n    {...props}\r\n  >\r\n    <ToggleGroupContext.Provider value={{ variant, size }}>\r\n      {children}\r\n    </ToggleGroupContext.Provider>\r\n  </ToggleGroupPrimitive.Root>\r\n))\r\n\r\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\r\n\r\nconst ToggleGroupItem = React.forwardRef<\r\n  React.ElementRef<typeof ToggleGroupPrimitive.Item>,\r\n  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\r\n    VariantProps<typeof toggleVariants>\r\n>(({ className, children, variant, size, ...props }, ref) => {\r\n  const context = React.useContext(ToggleGroupContext)\r\n\r\n  return (\r\n    <ToggleGroupPrimitive.Item\r\n      ref={ref}\r\n      className={cn(\r\n        toggleVariants({\r\n          variant: context.variant || variant,\r\n          size: context.size || size,\r\n        }),\r\n        className\r\n      )}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ToggleGroupPrimitive.Item>\r\n  )\r\n})\r\n\r\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\r\n\r\nexport { ToggleGroup, ToggleGroupItem }\r\n",
    "language": "tsx"
  },
  "@/registry/ui/toggle": {
    "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\r\nimport { cva, type VariantProps } from \"class-variance-authority\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nconst toggleVariants = cva(\r\n  [\r\n    \"relative inline-flex items-center justify-center gap-2\",\r\n    \"font-medium text-sm tracking-tight\",\r\n    \"transition-all duration-200 ease-out\",\r\n    \"outline-none select-none\",\r\n    \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\r\n    \"disabled:pointer-events-none disabled:opacity-40\",\r\n    \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\r\n    \"whitespace-nowrap\",\r\n  ],\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default: [\r\n          \"rounded-full\",\r\n          \"bg-secondary/50 text-secondary-foreground\",\r\n          \"hover:bg-secondary/70\",\r\n          \"active:scale-95\",\r\n          \"data-[state=on]:bg-primary data-[state=on]:text-primary-foreground\",\r\n          \"data-[state=on]:shadow-sm data-[state=on]:shadow-primary/20\",\r\n          \"data-[state=on]:scale-100\",\r\n        ],\r\n        outline: [\r\n          \"rounded-full\",\r\n          \"border border-border/40 bg-background/60 backdrop-blur-sm\",\r\n          \"shadow-xs\",\r\n          \"hover:bg-accent/50 hover:border-border/60\",\r\n          \"active:scale-95\",\r\n          \"data-[state=on]:bg-primary/10 data-[state=on]:text-primary\",\r\n          \"data-[state=on]:border-primary/50\",\r\n          \"data-[state=on]:shadow-sm data-[state=on]:shadow-primary/10\",\r\n        ],\r\n        ghost: [\r\n          \"rounded-full\",\r\n          \"bg-transparent text-muted-foreground\",\r\n          \"hover:bg-accent/50 hover:text-foreground\",\r\n          \"active:scale-95\",\r\n          \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\r\n        ],\r\n        glass: [\r\n          \"rounded-full\",\r\n          \"bg-background/40 backdrop-blur-xl\",\r\n          \"border border-border/20\",\r\n          \"shadow-sm\",\r\n          \"hover:bg-background/60 hover:border-border/30\",\r\n          \"active:scale-95\",\r\n          \"data-[state=on]:bg-primary/90 data-[state=on]:text-primary-foreground\",\r\n          \"data-[state=on]:border-primary/30\",\r\n          \"data-[state=on]:shadow-md data-[state=on]:shadow-primary/20\",\r\n        ],\r\n      },\r\n      size: {\r\n        sm: \"h-7 px-2.5 min-w-7 text-xs\",\r\n        default: \"h-8 px-3 min-w-8\",\r\n        lg: \"h-9 px-3.5 min-w-9\",\r\n        xl: \"h-10 px-4 min-w-10 text-base\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n      size: \"default\",\r\n    },\r\n  }\r\n)\r\n\r\nfunction Toggle({\r\n  className,\r\n  variant,\r\n  size,\r\n  ...props\r\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\r\n  VariantProps<typeof toggleVariants>) {\r\n  return (\r\n    <TogglePrimitive.Root\r\n      data-slot=\"toggle\"\r\n      className={cn(toggleVariants({ variant, size, className }))}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport { Toggle, toggleVariants }",
    "language": "tsx"
  },
  "@/registry/ui/tooltip": {
    "content": "\"use client\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\r\nimport * as React from \"react\"\r\n\r\ninterface TooltipProviderProps {\r\n  children: React.ReactNode\r\n  delayDuration?: number\r\n}\r\n\r\nconst TooltipProvider: React.FC<TooltipProviderProps> = ({\r\n  children,\r\n  delayDuration = 200,\r\n}) => (\r\n  <TooltipPrimitive.Provider delayDuration={delayDuration}>\r\n    {children}\r\n  </TooltipPrimitive.Provider>\r\n)\r\n\r\nconst Tooltip = TooltipPrimitive.Root\r\n\r\nconst TooltipTrigger = TooltipPrimitive.Trigger\r\n\r\nconst TooltipContent = React.forwardRef<\r\n  React.ElementRef<typeof TooltipPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {\r\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\"\r\n  }\r\n>(({ className, side = \"top\", sideOffset = 4, ...props }, ref) => (\r\n  <TooltipPrimitive.Portal>\r\n    <TooltipPrimitive.Content\r\n      ref={ref}\r\n      side={side}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs 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 origin-[--radix-tooltip-content-transform-origin]\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </TooltipPrimitive.Portal>\r\n))\r\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\r\n\r\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }",
    "language": "tsx"
  }
}