{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-drawer",
  "title": "MicroClub Drawer",
  "description": "A drawer component for MicroClub UI",
  "dependencies": [
    "vaul"
  ],
  "files": [
    {
      "path": "registry/ui/mc-drawer.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport { Drawer as McDrawerPrimitive } from 'vaul';\nimport { cn } from '@/lib/utils';\n\nfunction McDrawer({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Root>) {\n  return <McDrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction McDrawerTrigger({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Trigger>) {\n  return <McDrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction McDrawerPortal({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Portal>) {\n  return <McDrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction McDrawerClose({ ...props }: React.ComponentProps<typeof McDrawerPrimitive.Close>) {\n  return <McDrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction McDrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Overlay>) {\n  return (\n    <McDrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        'fixed inset-0 z-50 bg-foreground/20',\n        'supports-backdrop-filter:backdrop-blur-xs',\n        'data-open:animate-in data-open:fade-in-0',\n        'data-closed:animate-out data-closed:fade-out-0',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Content>) {\n  return (\n    <McDrawerPortal>\n      <McDrawerOverlay />\n      <McDrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content fixed z-50 flex flex-col',\n          'bg-popover text-popover-foreground',\n          'shadow-2xl',\n          'data-[vaul-drawer-direction=bottom]:inset-x-0',\n          'data-[vaul-drawer-direction=bottom]:bottom-0',\n          'data-[vaul-drawer-direction=bottom]:max-h-dvh',\n          'data-[vaul-drawer-direction=bottom]:rounded-t-2xl',\n          'data-[vaul-drawer-direction=bottom]:border',\n          'data-[vaul-drawer-direction=bottom]:border-border',\n          'data-[vaul-drawer-direction=top]:inset-x-0',\n          'data-[vaul-drawer-direction=top]:top-0',\n          'data-[vaul-drawer-direction=top]:max-h-dvh',\n          'data-[vaul-drawer-direction=top]:rounded-b-2xl',\n          'data-[vaul-drawer-direction=top]:border',\n          'data-[vaul-drawer-direction=top]:border-border',\n          'data-[vaul-drawer-direction=left]:inset-y-0',\n          'data-[vaul-drawer-direction=left]:left-0',\n          'data-[vaul-drawer-direction=left]:w-drawer',\n          'data-[vaul-drawer-direction=left]:max-w-full',\n          'data-[vaul-drawer-direction=left]:rounded-r-2xl',\n          'data-[vaul-drawer-direction=left]:border',\n          'data-[vaul-drawer-direction=left]:border-border',\n          'data-[vaul-drawer-direction=right]:inset-y-0',\n          'data-[vaul-drawer-direction=right]:right-0',\n          'data-[vaul-drawer-direction=right]:w-drawer',\n          'data-[vaul-drawer-direction=right]:max-w-full',\n          'data-[vaul-drawer-direction=right]:rounded-l-2xl',\n          'data-[vaul-drawer-direction=right]:border',\n          'data-[vaul-drawer-direction=right]:border-border',\n\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-10 shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block\" />\n        {children}\n      </McDrawerPrimitive.Content>\n    </McDrawerPortal>\n  );\n}\n\nfunction McDrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn('flex flex-col gap-2 px-4 pt-0 pb-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4 pt-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Title>) {\n  return (\n    <McDrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-base font-semibold text-foreground leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof McDrawerPrimitive.Description>) {\n  return (\n    <McDrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-sm text-muted-foreground leading-relaxed', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McDrawerNav({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-nav\"\n      className={cn('flex h-drawer-nav items-center gap-2 px-6 py-2.5', className)}\n      {...props}\n    >\n      <McDrawerClose\n        className=\"flex h-8 w-8 items-center justify-center rounded-md text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50\"\n        aria-label=\"Go back\"\n      >\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M12.5 15L7.5 10L12.5 5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </McDrawerClose>\n    </div>\n  );\n}\n\ninterface McDrawerNavItemProps extends React.ComponentProps<'button'> {\n  icon?: React.ReactNode;\n  hasArrow?: boolean;\n  rightElement?: React.ReactNode;\n}\n\nfunction McDrawerNavItem({\n  icon,\n  hasArrow = false,\n  rightElement,\n  children,\n  className,\n  ...props\n}: McDrawerNavItemProps) {\n  return (\n    <button\n      data-slot=\"drawer-nav-item\"\n      className={cn(\n        'flex h-drawer-item w-full items-center justify-between rounded-xl',\n        'px-6 py-5',\n        'text-sm text-foreground',\n        'transition-colors hover:bg-accent hover:text-accent-foreground',\n        'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50',\n        className\n      )}\n      {...props}\n    >\n      <span className=\"flex items-center gap-3\">\n        {icon && (\n          <span className=\"shrink-0 text-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        {children}\n      </span>\n\n      {rightElement ??\n        (hasArrow && (\n          <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n            <path\n              d=\"M6 4L10 8L6 12\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        ))}\n    </button>\n  );\n}\nexport {\n  McDrawer,\n  McDrawerPortal,\n  McDrawerOverlay,\n  McDrawerTrigger,\n  McDrawerClose,\n  McDrawerContent,\n  McDrawerHeader,\n  McDrawerFooter,\n  McDrawerTitle,\n  McDrawerDescription,\n  McDrawerNav,\n  McDrawerNavItem,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}